In previous posts we looked at creating the Techlahoma app and writing a few Cucumber feature scenarios, writing the first step definitions to make the Cucumber scenarios pass, and integrating OmniAuth to allow us to delegate authentication to 3rd parties like GitHub and Twitter. Today I’m going to set up my local environment with GitHub and Twitter integrations to complete the user sign in experience.

In the last post we configured OmniAuth to look for some configuration info in environment variables. For GitHub, for example, we're looking at ENV['GITHUB_CONSUMER_KEY'] and ENV['GITHUB_CONSUMER_SECRET']. I'm going to use Foreman to handle the job of setting up environment variable and starting local services.

First we need a Procfile to tell foreman how to start a local web worker.

web: rails s

Now to start a local server instead of running rails s I can use foreman start. This same command will also start any background process that we may eventually add, and it will set up the environment variables that we need for 3rd part auth.

Next we need to create a file called .env in the main project directory. We'll also add it to .gitignore since it will contain info that we don't want to be a part of the public repo.

touch .env
echo ".env" >> .gitignore

Now, to get the tokens for GitHub I went to the New OAuth Application Page and entered "Techlahoma Devel" as the name of the app, http://localhost:3000/ as the application home page and http://localhost:3000/auth/github/callback as the callback URL. Then I took the "Client ID" and "Client Secret" and added them to the .env file like this:

GITHUB_CONSUMER_KEY=ClientID
GITHUB_CONSUMER_SECRET=ClientSecret

Now I can use foreman start to start my local server, visit the sign in page and click on "Sign in with GitHub". Then I'm redirected to GitHub and show a page that tells me that "Techlahoma Devel" is requesting some information. Clicking the "Allow Access" button redirects me back to my local machine and I can see in the header of the page that I'm logged in. Woot!

Now to set up Twitter I go to the Create an applicaton page and create another "Techlahoma Devel" application. Unfortunately Twitter doesn't recognize http://localhost:3000 as a valid URL format. I use Forward to (selectively) allow public access to my local development server. So, I went into the techlahoma app dir and ran forward 3000. This gives me a publicly accessible url that I can use for the application home page and callback URL.

Now I add the Client ID and Client Secret to the .env file.

TWITTER_CONSUMER_KEY=ClientID
TWITTER_CONSUMER_SECRET=ClientSecret

And add a "Sign in with Twitter" link to app/views/sessions/new.html.erb.

<%= link_to "Sign In With Twitter", "/auth/twitter" %>

Now I can sign in with Twitter. Hooray!

Next time we'll write some feature scenarios to allow a user to add multiple authentication providers to their account.