Azure Active Directory do not refresh auth token

[jeliasson]

Authentication provider azureActiveDirectory does not refresh token after expiry, which is 3600 seconds. As of canary 0.23.1-canary.10 the user is redirected to the authentication page, but it will need some more work on the provider to renew the token.

Related Issues
#1636 [Tracking] Validate token refresh issue across providers

Related PR
#1675 Azure Active Directory refresh access token (✅ merged)

/cc @dac09

[jeliasson]

@dac09 @thedavidprice Assign this issue to me. Thanks!

[dthyresson]

@dac09 @thedavidprice Assign this issue to me. Thanks!

Assigned to @jeliasson.

[jeliasson]

Fixed and merged in cab9e5f. Closing issue.

@AndrewLamYW
Feel free to test this from canary build (yarn rw upgrade -t canary) and let us know if you have any issues.

/cc @dac09

[andrew-hwahin]

@AndrewLamYW
Feel free to test this from canary build (yarn rw upgrade -t canary) and let us know if you have any issues.

@jeliasson Thanks for your effort. 🙏 I'm facing this error after upgrading to the canary version 0.23.1-canary.23

[Tobbe]

@andrew-hwahin There is a breaking change in canary. We've changed an import and component name. Full details will be in the release notes for the next release. But basically what you have to do the same changes as I've done here:

https://github.com/redwoodjs/redwood/pull/1639/files#diff-478b4309175ff97877735ec43c9c1305479332e22b178c06d737f6c66ff841a1

Let me know if you need any help at all with that

[jeliasson]

@Tobbe Thanks for the clarification.
@andrew-hwahin Below is my setup.

web/src/index.js

import ReactDOM from 'react-dom'
import { azureActiveDirectoryClient } from 'src/lib/microsoft/azure/msal/client'

import { AuthProvider } from '@redwoodjs/auth'
import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
import { FatalErrorBoundary } from '@redwoodjs/web'

import FatalErrorPage from 'src/pages/FatalErrorPage'

import Routes from 'src/Routes'

ReactDOM.render(
  <FatalErrorBoundary page={FatalErrorPage}>
    <AuthProvider
      client={azureActiveDirectoryClient}
      type="azureActiveDirectory"
    >
      <RedwoodApolloProvider>
        <Routes />
      </RedwoodApolloProvider>
    </AuthProvider>
  </FatalErrorBoundary>,
  document.getElementById('root')
)

web/src/lib/microsoft/azure/msal/client.js

import { UserAgentApplication } from 'msal'

export const azureActiveDirectoryConfig = {
  auth: {
    clientId: process.env.AZURE_ACTIVE_DIRECTORY_CLIENT_ID,
    authority: process.env.AZURE_ACTIVE_DIRECTORY_AUTHORITY,
    redirectUri: process.env.AZURE_ACTIVE_DIRECTORY_REDIRECT_URI,
    postLogoutRedirectUri:
      process.env.AZURE_ACTIVE_DIRECTORY_LOGOUT_REDIRECT_URI,
  },
}

export const azureActiveDirectoryClient = new UserAgentApplication(
  azureActiveDirectoryConfig
)

Notice that the new getToken() method expects environment variable AZURE_ACTIVE_DIRECTORY_CLIENT_ID to be set. If you are using another environment variable, I suggest you pass options to getToken(options?), e.g.

const token = getToken({
   scopes: [process.env.ANOTHER_ENVIRONMENT_VARIABLE],
})

See https://github.com/redwoodjs/redwood/blob/main/packages/auth/src/authClients/azureActiveDirectory.ts#L20

I'll create a PR in redwoodjs.com to reflect this and some other things.

Edit: Preview for new docs targeted for 0.24.0.
https://deploy-preview-534--redwoodjs.netlify.app/docs/authentication#azure-active-directory

[andrew-hwahin]

A million thanks for the guidance and efforts 🙏 @Tobbe @jeliasson

I'm able to upgrade to the canary version successfully and so far I'm using it with no problem, I will update here again if I encountered any.😁

[jeliasson]

@andrew-hwahin You are welcome. Be noted that #1703 was merged a few hours ago and this will most likely result in that new docs being published as part of Redwood 0.24.0 release.

While this won't make any breaking changes, it clarifies how logIn and getToken behaves. Please let us know if there is something unclear in the docs. 🙏