Here is an ultimate working guide of how to implement authorization with GitHub and define necessary secret keys to development, CI/CD and deployment on Render.com for your Ruby on Rails App.
Before starting to work on this feature make sure you've already implemented Devise in your app and you have sign-in/sign-out user accounts. Always start with an issue and a new branch.
1. Add gems to your Gemfile:
gem "omniauth-github"
gem "omniauth-rails_csrf_protection"
gem "dotenv"
Run bundle install.
2. In your config/initializers/devise.rb find this line of code:
# config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'
Replace with this:
config.omniauth :github, ENV.fetch("MY_GITHUB_ID"), ENV.fetch("MY_GITHUB_SECRET"), scope: "user"
I strongly recommend to avoid the GITHUB_ prefix for secret names because later you will run into troubles when you add secret keys to your GitHub repository. GitHub reserves this prefix for its internal use. That's why I start my names with MY_.
3. Register your app on GitHub
On the next screen, fill in the “Application name”, the “Homepage URL” and the “Authorization callback URL”.
For now enter your live app preview’s URL (not your codespace’s):
https://<your-live-application-preview-url>
in the “Homepage URL”, and:
https://<your-live-application-preview-url>/users/auth/github/callback
in the “Authorization callback URL”.
On the next screen, you will see your Client ID, which is your first ENV "MY_GITHUB_ID". Also click to Generate a new client secret to get the second one for "MY_GITHUB_SECRET".
It's time to make it look nice and add GitHub icon. If you've already generated views template for your Devise go to app/views/devise/shared/_links.html.erb
and replace this code:
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<%= button_to "Sign in with #{OmniAuth::Utils.camelize(provider)}", omniauth_authorize_path(resource_name, provider), data: { turbo: false } %><br />
<% end %>
<% end %>
With this:
<%- if devise_mapping.omniauthable? %>
<%- resource_class.omniauth_providers.each do |provider| %>
<div class="my-4" >
<%= button_to omniauth_authorize_path(resource_name, provider),
data: { turbo: false },
class: "btn btn-secondary" do %>
<i class="fa-brands fa-github pe-2"></i> Sign in with GitHub
<% end %>
<% end %>
</div>
<% end %>
If you don't have views for your Devise, generate it:
rails generate devise:views -b form_for
and then replace code as described above.
For the icon I use Font Awesome so don't forget to connect it to your app. Go to your app/views/layouts/application.html.erb and paste this line of code into <head> or use partuals if you'd like.
<!-- Connect Font Awesome -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/js/all.min.js"></script>
Feel free to change the color of the button using .
.
10. Since we store our secret keys securely in .env they won't be commited because this file listed in .gitignore. That's why we need to additionally define them for Render and GitHub itself in case you're running CI/CD test. Let's start with Render. Navigate to Envinroment on Render.com and add your two keys there:
and replace Homepage URL and Authorization callback URL with your deployed domain name.
In your app in .github/workflows/main.yml add the following:
MY_GITHUB_ID: ${{ secrets.MY_GITHUB_ID }}
MY_GITHUB_SECRET: ${{ secrets.MY_GITHUB_SECRET }}
It should look like this:
If so merge your branch to main. It will trigger the deployment. It also should go well.
That's it! Enjoy your authorization with GitHub! 🥷
SOCIAL SHARE CARD GENERATOR