State error with auth0-js and iframe implementation

Hi There,

I have some difficulty to found an alternative or solution
I use "auth0-js": "9.15.0".

My case:

I use auth0 on my application for authentication with new Auth0 Universal Login and it works.
The problème is that some customers use iframe in her owns application to use my application.

With new Auth0 Universal Login we can’t use Disable clickjacking protection for Classic Universal Login for iframe usecase, so we can’t log with iframe.

For get around the problem i use popup from auth0-js to log user outside the iframe.

My implementation:


      const client = new auth0.WebAuth({
        domain: '[domain]',
        clientID: '[clientID]',
        redirectUri: '[redirectUri]',
        responseType: 'token id_token',
        scope: 'openid profile email',


          redirectUri: auth0Store.redirect_base_url + '/auth0?iframe=true',
        function (err, authResult) {
          if (null !== err) {
          //use authResult.accessToken

popup close


With iframe and chrome browser my authResult is undefined.
When i try to replace client.popup.callback() by client.parseHash i have an error

error: invalid_token, 
errorDescription: `state` does not match., 
message: `state` does not match.

This work with cross domain and Firfox, but doesn’t with Google chrome.
I think this come from cookie management but i don’t know how to resolve this problem

Thank you in advance for your answer =)

1 Like

I had the same error, and after some research, I found a closed issue on GitHub:

Issue #1077

And after adding the following to the WebAuth initialization object everything worked fine:

const client = new auth0.WebAuth({
domain: ‘[domain]’,
clientID: ‘[clientID]’,
redirectUri: ‘[redirectUri]’,
responseType: ‘token id_token’,
scope: ‘openid profile email’,
__tryLocalStorageFirst: true

1 Like

Thanks for sharing it with the rest of community!

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.