Omniauth with google_ oauth2 on rails
Tags: rails, google, omniauth
Published: 2021-05-04 23:00:16

what if you could set up your account with a third party logging? when I first heard this I was so excited to get started and use this gem. Omiauth gem is awesome!. but when I actually started implementing it on my project was completely lost and gave me a bunch of errors.

one of the errors was URI's not matching and the other one was missing current_id. follow me step by step to get this done the right way and smoothly continue with your project. 

so the First step to implementing google authentication is to get a developer account on their website. 'https://console.developers.google.com'
Once the account is created you will be on your home page, then select credentials.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6hno17m3t1k6khq3wx1f.png)

then you should click on the Create Project button on the top right side of the screen, which will take you to another page to give your project a name, and organization if you don't have an Organization you can skip that fill, and select create.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbxyda1g1l9qrrn1o3oa.png)

when create selected will send you to the dashboard and will pop up a notification from there you can select your project.  if you see this warning below go ahead and select Configure consent screen, this needs to be done before you create the credentials.
 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kp360j9v6me03u8uzhr.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2c4vy7i5osj3q8v41vwm.png)

will ask you to choose one of the two options for our app we will select the external and select create.
then after filling up the requirements which are App name and User support email and scroll all the way at the bottom and under Developer Contact information add your email and save and continue. in the next two screens just select save and continue.



 now you should be able to select credentials on the left side of the screen and then click on the create credentials button at the top of the page. Select the OAuth client ID option for your authentication needs.
once you see the below photo will give you different options for your application type, ill be working with a web application so this one will be the one ill be choosing.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lzgc7vbh47leopxszkl.png)

the Authorized redirect URIs is very important here you need to give your client proper callback urls, which will get access to google's authentication information. Once your app does the typical google authentication requests, your application will need to get back some information, and these urls are the ones that are authorized to receive. once you added the Uri and save it will give you the client ID and Client Secret ID these is what you will need to add to your code. so let's jump into the editor. 

Add gem 'omniauth-google-oauth2'
gem 'dotenv-rails'
gem "omniauth-rails_csrf_protection" to your Gemfile then run bundle install.
Now that you have your gems, let's first start with our environment. In Rails, to set up your environment, you'll need to use your initializers and create an Omniauth.rb file. inside this file you will add the  middleware code below 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qkhcw0fnx3zezpvjjzji.png)

The ENV is referencing the client ID and secret from the client page where you included certain URI's. You'll have to include these in the .env at the root of the folder and then assigned their keys to their respective values. Make sure to include your keys in the gitignore file to hide them from public view.

You can now access the OmniAuth Google OAuth2 URL: /auth/google_oauth2 which we will add in the /congif/routes.erb 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wgxusm2xp1w3qfi3alwe.png) 

and also dont forget to add your button to your /views/sessions/new

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j8gci6kd0fxev7qulwlv.png)

 

On your routes, notice the callback is routed to a sessions controller, where we'll handle the creation of a session. Notice the below photo, here we will need to process the response we received from Google and either create a new user or log in an existing user. There are many approaches to this, so please keep in mind I am simply showing you my approach.


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cg8eqgvpqfrbvmyhcaj3.png)


When you are implementing this for your own project, I’d highly encourage you to pause your code inside the omniauth method with either binding.pry or byebug and add in the terminal request.env['omniauth.auth']  look at the response to see how to grab the info you need for your User model.

also, make sure you add the uid and provider to your users table.

ex: rails g migration addUidAndProviderToUsers uid provider

Then you will want to run rails db:migrate to update the users table.


Up to this point, I had followed the documentation and various tutorials. You should now be able to run your rails server and log in with Google. Please let me know if you have any comments, questions, or suggestions.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5wculbx8nh8sa6msexm.png)


Resources:
https://github.com/zquestz/omniauth-google-oauth2
https://github.com/bkeepers/dotenv
https://github.com/cookpad/omniauth-rails_csrf_protection