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
auth0js
to 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