In BlogPost, Elixir

How To Do Google OAuth Authentication With Phoenix and Elixir

A while back, I had to enable a login system using the OAuth via Google credentials in a Phoenix application. Quite a bit of this came from this nice article and this code repository by scrogson.

oauth logo

But as with all things in technology, there were a few bits that seemed to be out of date or were missing. This article fills in those gaps with a complete working solution so that you don’t have to Google around anymore.

Step 1 – Install the oauth2 hex package

If you don’t know how to install Elixir, I covered it in this article.

Configure your mix.exs file as follows:

Step 2 – Create the authorization controller

You have to create an authorization controller with one slight change.

In the get_user! method user of your authorization controller you’ll have to use this line of code:

Here is the controller code:

Now the above controller code is pretty much straight from scrogson’s repository with a few minor changes. Namely, I altered the get_user! method to parse information from the Google OAuth handshake a bit differently. Also, as of this writing, I noticed the get_user! method in scrogson’s repository didn’t work out of the box due to a different data structure I encountered.

I don’t know if Google changed the response it sends back or what happened.

Step 3 – Create a Google OAuth strategy module

One thing I had to do differently from the scrogson repository is to change the signature call of OAuth2.client.get_token!.

I had to use the following line of code in the get_token! method:

OAuth2.Client.get_token!(client(), Keyword.merge(params, client_secret: client().client_secret))

Step 4 – Enable The Google Plus API

You’ll need to enable the Google Plus API from the Google developer’s console.

enable google plus api

Step 5 – Create your credentials and register a redirect url

First, click the create credentials button.

create credentials in google

Next, you’ll see your client id and client secret. You’ll also need to put in a redirect URL for the OAuth callback.

your new google credentials

Step 6 – Configure your app with the client id and client secret

In config.exs, you’ll set up a client id, client secret and redirect url for your oauth callback.

Step 7 – Set up your routes in router.ex

Step 8 – Setup your views

Create a template in web/templates/layout in sign_in_sign_out.html.eex.

Now add sign_in_sign_out.html to the template in web/templates/layout/app.html.eex.

Step 9 – Add a user model

Step 10 – Add a .env file for local testing

Step 11 – Try it out!

  1. Type source .env at the command line.
  2. Run mix phoenix.server and navigate to the home page.

When you click on the login button, behind the scenes you’ll get a response back from Google that looks something like the following.

Summary & Resources

Once again, here are the links to the article(s) and example repositories I described.

  1. Reference article on Google OAuth in Phoenix
  2. Example code repository by scrogson.
Recent Posts