Implementing backend authentication for google login

Questions / Help
1

Hello, I have decided to learn Elixir and currently working on a simple web application using React and Phoenix. In my React app, I have a Google sign-in button that is rendered by Google’s api (https://developers.google.com/identity/sign-in/web/build-button), and I am able to get the authentication response back from a successful sign in.

However, I am having a big difficulty which I have spent a few days trying to get through. I am trying to implement a backend authentication since Google suggests this (https://developers.google.com/identity/sign-in/web/backend-auth).

As far as I can tell, Google doesn’t seem to have an SDK for elixir and doesn’t quite go through the details on an alternative route.

I have scanned through the documentations on both ueberauth and the unofficial googleapi sdk for elixir, I was not able to find a similar function that achieves what the google documentation was describing.

I hope I have only failed to identify the functions from those libraries due to my inexperience, but I don’t mind writing from scratch if only I knew how.

Any suggestions or answers would be much appreciated and I thank you for your time and consideration in advance.

2

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 :wink:
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:
https://hexdocs.pm/ueberauth_google/readme.html

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

2 Likes
3

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

1 Like
4

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!

5

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).

1 Like
6

@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.

4 Likes
7

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?

1 Like
8

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
9

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.

1 Like
10

I’m one of those googlers :sweat_smile:

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