So, it’s been like a month since I started learning Elixir and the Phoenix. Phoenix is a web framework powered by Elixir and the Erlang VM, which makes it fast.
In this post, we will see setting up “Sign in With Google” in a Phoenix application with Ueberauth . We will be using the ueberauth_google hex package to perform this.
I’m going to assume that you have created the Phoenix app and created a user model. It should look similar to this.
Adding Dependencies
We will add the ueberauth_google dependency to the deps in the mix.exs. Now, the mix.ex file looks like this.
Next we need to include this in the application function in the mix.exs. Now the application function looks like,
After this run the following command to install the added dependencies. This will show the entire dependencies list including the ones we added now.
Create a Google Project
Create a Google project by following the steps given here . The Google app will generate the client_id and client_secret that we need to configure in our app. In the Google app configurations, set the redirect_uri as “ http://localhost:4000/auth/google/callback /”.
Updating Configurations
We will now add the configuration of our google app in our Phoenix application. Add the client id, client secret, and redirect_uri to the config.exs file.
Now we have done all the configurations needed, we will get into coding now.
Defining the Routes
We will add the routes for sign in with google. We need the define the following routes in the routes.ex:
- OAuth Initiate - This initiates the OAuth process.
- OAuth Callback - This route is the route defined as redirect_uri in the google app configuration. We will get the user details in this callback call.
We will add these routes with the scope “/auth”. The code to be added to the router.ex looks like where provide is Google here. We can also use the same routes for any other social sign we need.
Auth Controller
We will now create a controller to handle the OAuth process.
- Inside the controllers folder, create a controller file called auth_controller.ex. We will define the callback function here.
- We need to define two callback functions.
- OAuth Success Case
- OAuth Failure Case
OAuth Failure Case
The Ueberauth send the failure response in the below mentioned format. So, we need to define a callback function to match the failure pattern. If the “assigns” variable has the key “ueberauth_failure”, it indicates that the authorization failed.
OAuth Success Case
If the failure key is not present then the authorization is successful and it sends the oauth response in the key “ueberauth_auth” in the response. So, we need to define the callback function to match the response pattern.
Like in the code below, we can match the user information and send it to the user changeset and based on the use case either create or update the user details.
Yay! Now, you have successfully used Google OAuth to authenticate your users.
In this article, we discussed implementing Sign in with Google in our Phoenix application. Ueberauth provides OAuth for most of the social platforms such as Facebook, Twitter. WIth this we can also get the user token from the OAuth response and play with the Google APi to integrate google apps like Google Calendar, Google Meet. With this, the user does not have to remember a password which gives a good user experience.
If you find any difficulties, reach out to [email protected] .