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:
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.
@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?
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?
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.
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.