After using PassportJS to create different authentication strategies for some of my latest projects, I came across a little barrier: I was having to create all my social login buttons from scratch!

 

Do not despair, you do not have to align your images, css up your buttons, and get your site looking right all at once, there’s a library for it. It comes with colours correct for the social login you are interested in and the ability to use all of bootstrap’s other classes to style/position your buttons as you see fit.

 

Getting Started With ¬†“Social Buttons for Bootstrap”

 

First of all you need to make sure you have Bootstrap, FontAwesome and Social Buttons for Bootstrap referenced on your html page. I can help you here:

 


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-social/4.12.0/bootstrap-social.css" rel="stylesheet" type="text/css">

 

 

Then to create your individually styled buttons choose your provider and enter the following html making sure to replace provider with your chosen social provider (twitter, github, e.t.c.):


<a class="btn btn-social btn-PROVIDER" href="">
<span class="fa fa-PROVIDER"></span> Sign in with PROVIDER
</a>

Here is an example of the twitter button created from the following HTML:


<a class="btn btn-social btn-twitter" href="/auth/twitter">
<span class="fa fa-twitter"></span> Sign in with Twitter
</a>

twitter social button

 

This will make your life easier and standardise all your buttons so you get a nice clean image to your app which requires social login.

 

Stay tuned for more tutorials on PassportJS and authentication in the future!