How do I get single-sign-on to work with auth0-javascript-samples/02-Calling-an-API?

I have the pre-made Auth0-provided auth0-javascript-samples/02-Calling-an-API project running in a Docker, and it works fine. Except for one thing: Single-sign-on isn’t working.

I.e., I can start up the single-page app in a browser tab. I can then log in using Google as an identity provider. Then I can press the “Ping API” button and it works. But if I open up the same SPA in a different tab in the same browser, I have to login again. :frowning:

What modifications do I need to implement for this demo SPA to support single-sign-on?

Forgive me if this is something that I should be able to figure out on my own. I have developed Javascript-heavy web-pages before, but they only made API calls to the same server that served the web pages. Anything more complex is completely new to me.

Thanks!
|>ouglas

1 Like

Hello, welcome to our Community!

Unfortunately, SPAs use Embedded login, in which the session is created in the app itself, and not in Auth0. Because of that, there is no persistent session in Auth0. That means, there is no existing session to look for to perform SSO.

To use SSO, you can use Universal login.

We recommend you this document that has more information about both universal and embedded login: https://auth0.com/docs/guides/login/universal-vs-embedded

Thank you!

Thanks for your help and the information! But I’m still confused. If I look at the source code in the QuickStart sample project I’m using, I can see that it is doing await auth0.loginWithRedirect(options) to log in. Doesn’t that use Universal Login, not Embedded Login?

Also, the QuickStart documentation for making a single-page app with Javascript says to use auth0.loginWithRedirect(). And this documentation specifically says that this will “redirect to the Auth0 Universal Login Page”.

Furthermore, when I click on the “Log in” button in the provided SPA project, I can see via the browser URL bar that I have been redirected to a site hosted by Auth0. I.e., this is what I see in the URL bar:

https://dev-ri-cdie3.auth0.com/login?state=g6Fo2SBTY1lLY0V5SXlOMlpjWVJDR1RUTWNMdGlJLWlGQS14ZaN0aWTZIEdTWGt5LVlYdVVmWUtYcm1WdVF4Tm16b1hLMlQ0UmRVo2NpZNkgSjVjRkE3WldzeHZyNTJxSkRNdmpJYUpKMVphYkoyTko&client=J5cFA7ZWsxvr52qJDMvjIaJJ1ZabJ2NJ&protocol=oauth2&audience=http%3A%2F%2Fauth0-api-sample&cacheLocation=localStorage&scope=openid%20profile%20email&response_type=code&response_mode=query&nonce=xg37IoD7F8gSYOLal2YM-00Qvsd0Dk-8MP5Ns4gagPd&redirect_uri=http%3A%2F%2Flocalhost%3A3000&code_challenge=bp3SaQi-AB42XhS07slYNcDIyniD829A5aaQUKuaHSA&code_challenge_method=S256&auth0Client=eyJuYW1lIjoiYXV0aDAtc3BhLWpzIiwidmVyc2lvbiI6IjEuMi40In0%3D

Thanks!
|>ouglas

1 Like

I figured out the answer to my problem. It had nothing to do with using Embedded Login. Universal Login is used by the Auth0-provided project I was using, which I fetched directly from GitHub.

The problem turned out to be that there are a bunch of Auth0 Dashboard settings that must be set just so, or session cookies get lost, and SSO doesn’t work. Also, for using Google as my identity provider, which is what I am doing, you have to get credentials from Google. When you go to turn this on in the Dashboard under Connections => Social, the directions there say that you can use Auth0-provided developer credentials, but I guess I missed at the time that if you do this, then SSO won’t work.

There is a link provided there, however, to the Google page that allows you to set this up properly for SSO to work.

|>ouglas

2 Likes

Glad you have figured it out yourself! And thanks a lot for sharing with the rest of community!

2 Likes