Implementing backend authentication for google login

Hey there,

welcome to the Elixir Forum!

Do you absolutely want to use the JavaScript-based login button?

I haven’t tried that myself because the alternative with Ueberauth and Google Oauth2 is so simple
All you need to do is add Ueberauth to your application, configure it with your Google credentials, add the required routes and implement your authentication logic.

You should be able to get things running following the Ueberauth Google guide:

The Ueberauth devs have also created a fully configured Phoenix application using Ueberauth for further reference:

https://github.com/ueberauth/ueberauth_example

Try also checking out Open ID Connect and Pow Assent’s Google strategy. Depends what kind of deferred authentication you’re trying to do.

Thank you so much @wmnnd @MrDoops for the welcome and suggestions!

I honestly thought it was the ONLY way to implement the google sign-in, to use that “javascript-based login button” haha.

In the mean time, I have figured out that, for some reason, the backend wasn’t receiving the correct id_token that I got from the client-side, and therefore all my tokeninfo endpoint was failing. (obviously I thought it was google’s fault as should a good tunnel-visioned coder)

I will definitely check out both suggestions and see if I can get the redirect urls to work with the localhost as well (which is where im doing most of development and debugging)

Thanks again!

I’ve been able to do it with localhost in the past.
Alternatively, you could always set up a domain (like local.example.com with an A Record to 127.0.0.1).

@wmnnd I have read and attempted to follow the ueberauth_google documentation until i saw that this library is only explaining the steps to use for a pipe_through: browser while my goal is to develop the phoenix backend that is uniformly available to support both web and mobile, and does nothing to affect the client-side.

I have a feeling this forces me to go back to using the javascript button, since if my backend is to be responsible for only validating the token returned from the google api, and not serve the html form.

I want to know what you think, and if my lack of experience made me miss something.

I am in a similar situation, that I need a backend that can handle web and mobile too, so it will probably will have to be the token route, do you have any update how you did it?

Hey same here, I set up login on my single-page react web app and have the tokenId. I’m sending it to my Elixir api-only backend, but I don’t know how to fetch my Google user using this token.

const handleLogin = async (response: any) => {
    console.log(response);

    const res = await fetch("/api/v1/auth/google", {
        method: "POST",
        body: JSON.stringify({
            token: response.tokenId
        }),
        headers: {
            "Content-Type": "application/json"
        }
    })

    const data = await res.json()
    console.log(data)
}

In my backend I’m trying to figure out how to get my user information for the past couple of hours.

def google(conn, params) do
  IO.inspect params
end

I believe I figured it out! Of course the second I ask about it I answer myself as usual haha!

Guide incoming for would-be googlers.

I’m one of those googlers

Do you maybe still have some tips on how to approach this?