Vanilla JS, SPA library, user name / password reads cookie and auths, login via Google doesn't

I have a vanilla JS app that uses auth0-spa-js/1.2/auth0-spa-js.production.js.

Works great in many scenarios. User clicks Login button. Code calls createAuth0Client, passing domain and client id. Then calls loginWithRedirect, passing redirect URI. Auth0 presents login dialog. User enters user name and password, then confirms. Auth0 executes callback. Page loads, allocates client, detects user not authenticated, finds code and state values in query string, calls handleRedirectCallback. Calls isAuthenticated, which returns true. Calls getUser, which returns user. All good.

Now user wants to navigate to another page on the same site. Page load code on target page calls createAuth0Client, as before. Calls isAuthenticated, which returns true. All good.

My understanding is that this works because Auth0 stores code and state in cookies.

Repeat the above scenario, but this time user logs in via Google. Log in works. Code gets user object. User navigates to another page. Auth0 says user not authenticated.

I tried reading code and state from the cookie, creating a URL with code and state and redirecting to it, hoping the code that works for user name / password will work. Didn’t work. Auth0 says bad state.

Is there a way to get the behavior I’m getting (page to page nav without user logging in again) with Google login?

Other than this glitch, having a great time with Auth0!

HI there @mindmodel and welcome to our Auth0 Community!

To confirm you are not using Google Development keys right? We have a nifty article on Google as a social connection. When you get a chance can you give it a look and make sure everything is setup the way we expect. From there we can branch out with your tenant name in a direct message and build out from there. Thanks!

https://auth0.com/docs/connections/social/google

I finally got this working. Thank you again for your reply.

I found the Google API dashboard very confusing. Something to note, for anyone else following this at home. As I worked my way down the Google form, it asks you to upload a logo image. DON’T do this.

If you upload an image, when you get to the bottom of the form and try to complete it you can click the button to save the entries. When you click Save, the Google page disables the Save button, showing that it accepted the save command. But it shows you a disabled Submit button, with a tooltip that says you can’t submit until you associate some sort of OAuth id with the request. No matter how much I Googled the message or explored the Google API pages I wasn’t able to figure out what it wanted me to create. The page also says that once you do manage to submit the request, the approval process may take weeks.

If you simply don’t upload a logo image, none of this happens. No disabled submit button. No approval process. It just works.

In addition, since we’re all using Auth0 here, it’s worth noting that Auth0 allows you to upload your logo image in the Auth0 settings. So the Auth0 login dialog that contains the Log in with Google button already contains your custom logo, so you don’t need one in Google.

As far as I can tell, the Google social login is now working with Auth0 in my app.

1 Like

Thank you for sharing your feedback @mindmodel! We appreciate the shared experience :pray:

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