After completing my first rails project, I found that logging in a user through Omniauth was very interesting as well as challenging. For this project, I gave the user the ability to use their Google Account to log in to my app, but Google is only one of many strategies that I could’ve used. Omniauth wiki has a list of strategies that are available if you’re interested in learning about other options. After my first successful login through Google, I was amazed that my simple and basic app was connecting to one of the largest websites in the world correctly. I now had a helpful user feature and I would like to write the steps you can take to add a Google Log In Link to your application.
First, set up an App in the Google Developer Console. After signing in or creating an account, create a new project.
Next, complete the Oauth consent screen. This will be the screen that comes up and asks ‘if you are sure you want to sign in with Google’. Then choose External, Create, and fill out the fields with the asterisks in the Edit app registration. My application is simple and is currently only in development mode, but if I wanted to put it in production, I would want to fill out the entire app registration. Save and Continue until you’ve completed the Oauth consent screen steps.
Now, navigate to Credentials, + Create Credentials, and Oauth client ID. Then select your application type, mine is a web application, and enter in a name.
Add an Authorized Redirect URIs and save/create.
http://127.0.0.1:3000/auth/google_oauth2/callback
Your Credentials will now pop up on your screen which we will use in your rails app shortly. These Credentials are sensitive pieces of information and will need to be hidden from your commit history which the following steps will cover.
But first, go to your Gemfile to add and install a few gems.
gem ‘dotenv-rails’
gem ‘omniauth’ — this allows us to use a third party system for a sign in
gem ‘omniauth-google-oauth2’
Now back to securing your Credentials in your project, add a ‘.env’ file to your root directory and set Constants equal to your information. No quotation marks or spaces.
Now that the Credentials are in the .env file, we have to add this file’s name to the .gitignore file. This will tell GitHub to ignore this file when you push your commits so your Credentials are not visible in your commit history.
Next, add an omniauth.rb file to config/initializers and paste the following code which you can get from the google_oauth2 documentation. *The Environment Variables must match what is called below.
If you look in the google_oauth2 documentation and scroll down to the Auth Hash section, you will see the information you will receive from google.
Create a migration to add a uid column, :string and provider column, :string to your users table.
Next, add a callback route in routes.rb.
get ‘/auth/:provider/callback’, to: ‘sessions#omniauth’ — the dynamic portion (:provider) allows you to dynamically handle other strategies such as Facebook, Twitter, etc.
Inside the Sessions Controller, an omniauth method will need to be created. This is a good place to put a binding.pry or byebug to view all of the information you get back from the request. Inside the pry or byebug try running commands such as: request.env[‘omniauth.auth’] ; request.env[‘omniauth.auth’][:info][:email]
Finally, add some links to your views.
<%= link_to ‘Login with Google’, ‘/auth/google_oauth2’ %>
Try it out and soon be amazed that your project is now able to log in a User through their Google Account!
