Auth0 with AAD (Azure Active Directory)

Hi Team,
I am trying to implement authentication with auth0.
I init this though the cli, and updated the proper keys.

The app in auth0 is connected to AAD and working.

In RW:

  1. logIn() from “useAuth()” is working, bringing up auth0 widget.
  2. Widget go to Azure login
  3. This is redirecting and failing with 401 on the token request from auth0.com/oauth/token - url is http://localhost:8910/callback?code=xxxx

relevant information:

index.js:
import { AuthProvider } from ‘@redwoodjs/auth’
import { Auth0Client } from ‘@auth0/auth0-spa-js’
import ReactDOM from ‘react-dom’
import { RedwoodProvider, FatalErrorBoundary } from ‘@redwoodjs/web’
import FatalErrorPage from ‘src/pages/FatalErrorPage’

import Routes from 'src/Routes'

import './index.css'

const auth0 = new Auth0Client({
    domain: 'xxx.auth0.com',
    client_id: 'xxx',
    redirect_uri: 'http://localhost:8910/callback',
    cacheLocation: 'localstorage',
    audience: 'https://xxx.auth0.com/api/v2/',
  })
ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider client={auth0} type="auth0">
      <RedwoodProvider>
        <Routes />
      </RedwoodProvider>
    </AuthProvider>
  </FatalErrorBoundary>,
  document.getElementById('redwood-app')
)

Layout:
onClick={async () => {
if (isAuthenticated) {
await logOut()
navigate(‘/’)
} else {
await logIn()
}
}}

{isAuthenticated ? ‘Log out’ : ‘Log in’}

newly created RW app, no additional package added

package.json
{
“private”: true,
“workspaces”: {
“packages”: [
“api”,
“web”
]
},
“devDependencies”: {
@redwoodjs/core”: “^0.12.0”,
“netlify-plugin-prisma-provider”: “^0.3.0”
},
“eslintConfig”: {
“extends”: “@redwoodjs/eslint-config”
},
“engines”: {
“node”: “>=12”,
“yarn”: “>=1.15”
}
}

1 Like

I was responding re: the audience to say that in my setup doesn’t have /api/v2 but works – even though I looked at the machine-to-machine settings and the Unique identifier for the API there does. Odd.

That said, my login/logout is different from the doc’s example:

import { useAuth } from '@redwoodjs/auth'

const UserAuthTools = () => {
  const { loading, isAuthenticated, logIn, logOut } = useAuth()

  if (loading) {
    // auth is rehydrating
    return null
  }

  return (
    <Button
      onClick={async () => {
        if (isAuthenticated) {
          await logOut({ returnTo: process.env.AUTH0_REDIRECT_URI })
        } else {
          await logIn()
        }
      }}
    >
      {isAuthenticated ? 'Log out' : 'Log in'}
    </Button>
  )
}

export default UserAuthTools
  • No navigate, because you setup your redirect to just be the root of your site
  • Thus no “/callback” either
  • I just allow http://localhost:8910, http://localhost:8910/* or the Netlify deployed urls
  • logout needs to know where to go on logout, so need to set returnTo
  • all your urls have to be allowed in Auth0 app setup (Allowed Callback URLs, Allowed Logout URLs, etc)
  • also be sure to set Application Login URI as <yoursite.com>/login

I just checked the request on one of my logins

Request URL: https://<appname>.us.auth0.com/login/callback?state=aa_ZZZZXXXXXSSSSSSSS
Request URL: http://localhost:8910/?code=somecode&state=somestate

So, I might try removing the callback from your redirect_uri and see if that behaves better?