Calling authorize api for Google login

Help
,
1

What are we trying to accomplish?

  • This is the case where we only have Google social login. So, we want to skip showing the lock screen and directly hit the users up with the Google sign-in screen instead.

How are we trying to solve this?

  • Wrote a separate backend function to call the (social) /authorize api.
    Code Snippett:
const getString = "https://" + config.AUTH0_DOMAIN + "/authorize?" +
    "response_type=token%20id_token&"+
    "client_id="+client_id+"&"+
    "prompt=login&"+    
    "connection=google-oauth2&"+
    "is_submitting=false&"+
    "redirect_uri="+currentURL+"&"+
    "state=asergasevvsafhs&"+
    "nonce=erwrr8kQUNdsegngsgspbZB57XLtQv&"+
    "connection_scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fclassroom.profile.emails%2Chttps%3A%2F%2Fwww.googleapis.com%2Fauth%2Fclassroom.rosters%2Chttps%3A%2F%2Fwww.googleapis.com%2Fauth%2Fclassroom.coursework.me%2Chttps%3A%2F%2Fwww.googleapis.com%2Fauth%2Fclassroom.courses%2Chttps%3A%2F%2Fwww.googleapis.com%2Fauth%2Fclassroom.profile.photos&"+
    "access_type=offline"

    const response = await fetch(getString, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json'
      },
    })
  • Frontend calls this backend function and gets the 200 status and also a redirect url back.
  • This redirect URL is essentially a google authentication url.
    URL format looks something like this…
    https://accounts.google.com/ServiceLogin?continue=https%3A%2F%2Faccounts.google.com%2Fsignin%2Foauth%2Flegacy%2Fconsent%3Fauthuser%3Dunknown%26part%3DAJi8hAMAE5Xa6RqzlOEo-veB2HX4KMG-1MemBDwYUTbu-C1I6NZiYu028ggH6ii7LE7JFKXWqDvvTbTAppyFw4A85l4AmG6sBq2JtKrNuKI9LtCQto6mMrRpahv0QxNqNJhIrLPEi3eaEWY7Z6CjuajuGVaCQ...5%23&sacu=1&oauth=1&rip=
  • Frontend app opens this URL up and tries to authenticate the user in the hope to get a token back after authentication.
  • After getting the token we make another api call to parse the JWT token.
    The above process is in line with this post. In our case, it is javascript and not PHP.

Problem

  1. The callback Google authentication url we are getting is authenticating, but we get this error after authentication.
    400. That’s an error. The server cannot process the request because it is malformed. It should not be retried. That’s all we know.
    Screenshot_1

  2. It is not clear on how to call the google auth url and get the token back.

Can anyone shed some light on this process and see how we can overcome this problem?
Thanks!

2

Hi, @dynosapp!

Do you think you can send me a HAR file of the failed authentication flow via DM, please? You can find instructions on how to get one here: Generate and Analyze HAR Files

Thanks!

3

Hi again, @dynosapp,

Thanks for the HAR file. Could you please try this login from an Incognito window? It seems like the error is somewhere within the Google flow, as it’s going through a couple Google flows before erroring out. Google is also mentioning that there’s a malformed request (400 Bad Request) error, but gives no details on what it’s expecting.

Also, could you please confirm with me that you have a verified app in the Google end?

Thanks!

4

Yes, this is a verified app by Google.
The HAR file I produced was from an incognito window.
The Google URL that auth0 is giving us…can we open this from a browser? The URL format suggests that it is a serviceLogin. I am not sure what that means.

5

Hello, @dynosapp,

No, there has to be a request on Auth0 in order for Auth0 to accept a request back.

What happens if you try the connection directly from your Dashboard, using the Try button? Does it work?

6

So, if this has to be done from the Auth0 end, I should not be calling it from the browser.
Currently, I am trying to do that and getting this error.
How can Auth0 call this URL? It sounds like I am catching the Auth0 process before it is finished?

No, this is a good connection that we have been using for a while for our main login.
We are trying to build a secondary login with just google social out of the existing connection.

7

@dynosapp I guess I’m confused here. The flow should be the following:

  • You make a request to Auth0 (via the /authorize endpoint)
  • Auth0 requests the federation to Google
  • The user logs in to Google
  • Google sends a response back to Auth0
  • Auth0 processes the response, and logs the user into the application

Those are just the bare bones, but that’s what happens, in short. You mention this was working, what did you change? Where in this flow you’re seeing the error happen?

8

No, I was saying the social connection works but only if I use Lock.js. Calling the Authorize api without using Lock is still not working.
The problem is after the user logs in to Google, it is not sending a response back as I explained above.

9

@joseantonio.rey, I hope what I outlined above makes sense. If it doesn’t, if there is a working example in any of your GitHub repos that I can follow, please provide so I can at least diagnose the problem better.

10

@dynosapp I see that you have an is_submitting parameter - could you try removing that one and letting me know if that helped?

11

I get the same output. Basically I get a 200 status and a google URL.

image
image894×514 20.2 KB

When I send this url to browser, it takes me to a google authentication followed by the 400 error shown above.

12

@dynosapp I think I found the problem here - the /authorize call is the one that’s supposed to be made from the browser. Whatever happens after in the flow will not be recognized in the browser because the states will not match, and neither will the cookies. The Auth0 /authorize call will take you to Google because of the connection parameter being sent.

Try it out and let me know how it goes.

Thanks!

13

Aww. Let me try that.