Day 62 : #100DaysofCode - Sign in using a Third Party, Rails

SincerelyBrittany / todo-mvc-lv-codealong

Today I added omniauth to the simple todo application that I have been building. Although it can seem intimidating, after reading the directions, adding the Github and Twitter Omniauth was pretty simple to implement.

First you will need to sign up a developer account with Github and Twitter, if you have not already. Go to the developer page, create an application, and get an API Key and API Secret for both. While creating the application, you should make sure that the callback url is http://localhost:3000/app/github/callback for Github and http://localhost:3000/app/twitter/callback for Twitter.

Please note, I personally had issues creating my Twitter developer app because they require certain parameters when creating the website url. For those of you struggling, this is what my twitter application params look for the todo application.

My Twitter Developer App Info

Website URL
https://twitter.com/SincerelyBrittt

Sign in with Twitter
Enabled

Callback URL
http://localhost:3000/auth/twitter/callback

My Github Developer App Info

Homepage URL
http://localhost:3000

Authorization callback URL
http://localhost:3000/app/github/callback

Notice the callback urls are the same for the most part but the homepage/website url for twitter is my twitter... . The homepage/website URL is not that important during the development phase, but make sure your callback URL is set correctly

Afterwards, you will need to add the following gems to your Gemfile and run bundle.

gem 'omniauth'
gem 'omniauth-github'
gem 'omniauth-twitter'
gem "dotenv-rails", "~> 2.7"

Next you need to create two files. One to hide your api keys and another to initiate Omniauth .

.env

Before creating your .env file you should add .env to your gitignore file so that your secret keys will not be pushed to Github. Then you should create your .env file and add your Twitter and Github API Keys. It should look something like this:

.env

TWITTER_KEY=384727509238uuht572093iu398u48329
TWITTER_SECRET=iwjwoit845ihjreiudy98i43ohtuodikj98t89rithiueg9
GITHUB_KEY=9858303theit389uht38739uh
GITHUB_SECRET=0295ureijwhdnoit384ihtjkfndoiut0reithr9teuht

Initialize omniauth

The documentation for authorizing Github and Twitter give directions to create a file within config/initialize. I named my file omniauth.rb.

Within config/initialize/omniauth.rb I added the following code:

Rails.application.config.middleware.use OmniAuth::Builder do
    provider :twitter, ENV['TWITTER_KEY'], ENV['TWITTER_SECRET']
    provider :github, ENV['GITHUB_KEY'], ENV['GITHUB_SECRET']
  end

The above code is initializing OmniAuth and using the environment keys that we named within our config/initialize/omniauth.rb file.

Lastly, your application needs to know where its going, so you need to update your routes -- add the following code to config/routes.rb

  get '/auth/:provider/callback' => 'sessions#create'

You pretty much set up Omniauth on your rails app!!!! Run rails s and open an incognito browser and head over to http://localhost:3000/auth/twitter or http://localhost:3000/auth/github and you should now be able to see the sign in method for github and/or twitter.

Tomorrow I will go over how to use the information for authorization in your application.

As always thanks for reading!

Sincerely,
Brittany

Song of the day: