Hey guys,
My application uses universal login page and auth0js like so:
- a user enters app.myapp.com
- if there’s no cookie, the user is redirected to universal login page
- login page redirects back to
app.myapp.com/\#access_token=blablabla... - I use
auth0jsto parse the hash and generate a cookie, then the user can start working
This flow works just great.
Now I want to embed lock into my marketing site which is on a different domain (myapp.com)
I tried adding lock but when the user is redirected to app.myapp.com#access_token... I get "state does not match" error which makes sense because the state got saved on myapp.com domain and then tried to get verified on app.myapp.com domain.
To work around this issue I created a page on app.myapp.com/login.html which displays the lock page (using lock.js) and serve it on myapp.com using an iframe.
As a side note, this also didn’t work at first because lock.js saves the state and nonce on localStorage and auth0js looks for the state in the cookies (and fails) - this can be fixed using an undocumented config value __tryLocalStorageFirst (in auth0js)
Now I have two problems with the iframe:
- If I login with user+pass the login happens inside the iframe (but I need it to happen in the parent page - do you have support for that?)
- If I login with google-oauth I get the following error inside the iframe “accounts.google.com refused to connect”
What is the best practice to solve this flow?
There are other sites who do this - in the marketing page they show login buttons who take you directly to google-oauth and then to their app (instead of taking you to the app universal login where you then need to click another button to start the oauth process)
Thanks,
Amit