How to get social login buttons using devise + omniauth + rails

Question

I am currently running a rails 4 application, and I would like to get social login buttons instead of links which are the default provided by omniauth / devise.

Currently I have a signup form which looks like this,

And I included, the following gems, bootstrap-social-rails and font-awesome-rails.

I am hoping to get some buttons that look like this,

My new.html.erb looks like the following,

<%= f.submit "Sign up", class: "btn btn-primary" %>
    <%= f.submit "Twitter", class: "btn btn-block btn-social btn-twitter fa fa-twitter"%>
    <%= f.submit "Sign in with Twitter", class: "btn btn-social-icon btn-twitter fa fa-twitter" %>

Answer 1

First you need _link.html.erb file. There will be code for providers as i write below.

<%- if devise_mapping.omniauthable? %> 
  <%- resource_class.omniauth_providers.each do |provider| %>
    .........
  <% end -%>
<% end -%>

Change this code to following code of line.

<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <%= link_to "<i class='#{ICONS[provider]}'></i>".html_safe, omniauth_authorize_path(resource_name, provider), class: "ui #{COLOR[provider]} mini submit button ok" %>
  <% end -%>
<% end -%>

And in initialize, make CONSTANT for icon and color.

ICONS = { google_oauth2: 'google plus', twitter: 'twitter', facebook: 'facebook', linkedin: 'linkedin', github: 'github'}
COLOR = { google_oauth2: 'blue', twitter: 'twitter', facebook: 'facebook', linkedin: 'linkedin', github: 'black' }

Please change the class name(if it is different, That is just demo classes not from bootstrap).

Answer 2

OmniAuth authorisation performs by redirection to the provider service, which means that buttons are <a href="...">, not actual <button> tags.

In that case, what you would like to implement can be done like this:

<%= link_to user_omniauth_authorize_path(:twitter), class: "btn btn-block btn-social btn-twitter" do %>
   <span class="fa fa-twitter"></span> Sign in with Twitter
<% end %>