Day 62 : #100DaysofCode - Sign in using a Third Party, Rails
Tags: 100daysofcode, rails, omniauth, ruby
Published: 2020-08-02 03:09:30

{% github SincerelyBrittany/todo-mvc-lv-codealong no-readme %}

Today I added <a href="https://github.com/omniauth/omniauth"> omniauth </a> to the simple todo application that I have been building. Although it can seem intimidating, after reading the directions, adding the <a href=https://github.com/omniauth/omniauth-github">Github</a> and <a href=https://github.com/arunagw/omniauth-twitter">Twitter</a> <a href="https://github.com/omniauth/omniauth"> Omniauth </a>  was pretty simple to implement.

First you will need to sign up a developer account with <a href="https://developer.github.com/apps/building-oauth-apps/creating-an-oauth-app/">Github</a> and <a href="https://developer.twitter.com/en/account/get-started">Twitter</a>, 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 <b>http://localhost:3000/app/github/callback</b> for Github and <b>http://localhost:3000/app/twitter/callback</b> for Twitter.

<i> 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.</i>

<h3> My Twitter Developer App Info </h3>
```
Website URL
https://twitter.com/SincerelyBrittt

Sign in with Twitter
Enabled

Callback URL
http://localhost:3000/auth/twitter/callback
```
<h3> My Github Developer App Info </h3>
```
Homepage URL
http://localhost:3000

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

<i> 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 </i>

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 <a href="https://github.com/omniauth/omniauth"> Omniauth </a>  . 

<h3> .env </h3>
Before creating your ``.env`` file you should add ``.env`` to your <b>gitignore</b> 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
```

<h3> Initialize omniauth </h3>

The documentation for authorizing  <a href=https://github.com/omniauth/omniauth-github">Github</a> and <a href=https://github.com/arunagw/omniauth-twitter">Twitter</a> 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'
```

![Alt text of image](https://media.giphy.com/media/3o6Zt6JqPzgeHMBEuA/giphy.gif) 

You pretty much set up <a href="https://github.com/omniauth/omniauth"> Omniauth </a> on your rails app!!!! Run ``rails s`` and open an incognito browser and head over to <a href="http://localhost:3000/auth/twitter"> http://localhost:3000/auth/twitter </a> or <a href="http://localhost:3000/auth/github"> http://localhost:3000/auth/github </a> 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:

{% soundcloud https://soundcloud.com/nathan-greaux/crazy %}