Azure auth error

Attempting to set up Azure authentication.

Following Azure Active Directory Authentication | RedwoodJS Docs, I have:

  • yarn rw setup auth azureActiveDirectory
  • Created app registration.
  • Set up .env file with the environment variables called out in the guide.
  • Added a login() method to a button on a page from const { currentUser, isAuthenticated, logIn, logOut } = useAuth()

When I click the button, the openid-configuration endpoint is hit and a successful request is received, but nothing else happens other than this error in the console:

Any ideas on how to troubleshoot this further?

The actual error is caused by this code inside node_modules/@azure/msal-browser/dist/cache/BrowserCacheManager.js.BrowserCacheManager.cacheCodeRequest:

BrowserCacheManager.prototype.cacheCodeRequest = function (authCodeRequest, browserCrypto) {
        this.logger.trace("BrowserCacheManager.cacheCodeRequest called");
        var encodedValue = browserCrypto.base64Encode(JSON.stringify(authCodeRequest));
        this.setTemporaryCache(TemporaryCacheKeys.REQUEST_PARAMS, encodedValue, true);
    };

It looks like it is trying to stringify the entire request, which has circular references. Probably because that request object has target and currentTarget attributes that represent the React object that is being clicked on (the login button).

I can’t imagine the msal library is to blame here, but I don’t see any RW-specific code in the stack trace. Have you verified that Redwood auth currently works with msal-browser 2.32.2? I’ll try to downgrade to earlier versions to see if that helps.

Nope. I tried downgrading msal-browser all the way back to 2.17.0 with no luck.

Upgrading to RC4.0.0. Same problem.
Deleted node_modules, reran yarn install. Same problem.

@payneio The Auth providers are being decoupled from the framework and into separate packages. @Tobbe is working on that in preparation for v4.

I have a RedwoodJS project on 3.4.0 with @azure/msal-browser on 2.31.0 that works fine. Can you downgrade to that version to confirm if that is working?

@Tobbe Could we have a chat next week to do some aligning and testing?

Next week is perfect :slight_smile:

I downgraded my project to RedwoodJS 3.4.0 and @azure/msal-browser 2.31.0 and still get the same error. I’m going to try to install a new project using 3.4.0 and see what happens. Which nodejs version are you using in your successful project, @jetliasson?

I dropped to node lts/fermium (v14), created a new redwood project, dropped to Redwood 3.4.0 (by modifying the 3.8.0 to 3.4.0 in all package.jsons).

Same error!

Sanity check, am I doing something wrong in how I’m calling logIn? Here’s my test code:

import { useAuth } from '@redwoodjs/auth'
import { MetaTags } from '@redwoodjs/web'

const HomePage = () => {
  const { currentUser, isAuthenticated, logIn, logOut } = useAuth()
  return (
    <>
      <MetaTags title="Home" description="Home page" />

      <h1>HomePage</h1>
      <ul>
        {currentUser && <li>The current user is: {currentUser}</li>}
        <li>Is the user logged in? {isAuthenticated}</li>
        <li>
          Click to{' '}
          <button type="button" onClick={logIn}>
            login
          </button>
        </li>
        <li>
          Click to{' '}
          <button type="button" onClick={logOut}>
            logout
          </button>
        </li>
      </ul>
    </>
  )
}

export default HomePage

I appreciate your help on this, btw, @jeliasson and @Tobbe.

This really is the best dev framework/stack I’ve found in years… the integration of GraphQL and Prism is fantastic, along with the sane layout of the repo, and Jest/Storybook, and a nice client, and… and… and…! So very productive.

I’m considering evangelizing RedwoodJS for internal Microsoft demo/prototype projects as it lines up with our stack nicely. To do that, though, I really need to get this Azure auth working, as you can imagine. :wink:

I’m building with node:18-alpine. Try to nuke node_modules and reinstall the dependencies.

I did! I even created an entirely new project. Deleted node_modules and yarn installed and then ran through the auth tutorial for 3.5. Same issue. Weird, right??

Ok. Figured it out. I put all the node_modules sources (including @redwoodjs) into browser sources so I could start stepping through debugging and looking at values from the login call. I noticed immediately that the login functions’ options parameter was being set to a DOM event, which triggered a thought of what was going on. I just needed to change the calling link from:

<button type="button" onClick={logIn}>

To:

<button type="button" onClick={() => logIn()}>

I think what’s happening if you don’t use an anonymous function with no param is that the dom event click is being passed in as a param by default. Having that be passed in, eventually to the msal-browser library was causing it to blow up.

You might consider updating the docs here: Authentication | RedwoodJS Docs

@payneio Thanks for getting back to us with a solution!

The docs are being rewritten for the RW v4 release. You can see the new docs here Authentication | RedwoodJS Docs