Learning Strapi Authentication Flows with the Facebook Provider

This article is a guest post by Anumadu Moses. He wrote this blog post through the Write for the Community program. If you are passionate about everything jamstack, open-source or javascript and want to share, join the writer's guild!

Facebook Login with Strapi

Introduction

Strapi is a headless CMS built with Node.js and React.js. It has grown in popularity and acceptance recently because of its unique plugin design pattern and flat learning curve (easy to learn). Strapi API endpoints can be consumed with any recent JavaScript front-end frameworks (Nuxt.js, Vue.js, React.js, Next.js, e.t.c) or even core HTML, CSS, and Vanilla JavaScript or jQuery. Strapi is one of the best options when talking Jamstack. It is shipped with rich APIs to suit most of your Jamstack needs.

But enough talking about how great Strapi is. Since you are reading this article, I am sure you already know a thing or two about Strapi. This tutorial would walk you through the implementation process of Facebook as an authentication provider in Strapi. The process is not a complex one, so let's get right into it.

Strapi Auth Providers

Strapi is shipped with several providers for authentication, including Facebook, which is our main focus in this tutorial. Other providers include Google, GitHub, Instagram, Email, e.t.c.

To implement Facebook as an authentication provider in Strapi, we need a life address to redirect to. For this, we would be using Ngrok to expose our local development server to the internet in the easiest way possible. There are other ways to do this. Deploying your Strapi app to a server like Heroku, AWS e.t.c can serve as alternatives too. But for simplicity's purpose, let's work with Ngrok.

Create a Strapi Project:

Let's get started by creating a new Strapi project using the command below:

1yarn create strapi-app auth-provider-strapi --quickstart

or using npm

1npx create-strapi-app auth-provider-strap --quickstart

After installation, start your Strapi development server using the command below:

1yarn develop

your screen should look like the below. Go ahead and fill out the form, finish the registration process and access the Strapi application dashboard.

Ngrok Configuration

Ngrok Is a very light-weighted piece of cross-platform software that enables developers to access a project in their local development environment over the internet. With Ngrok, you do not need to deploy a project to a life server. You would be able to share your local projects with anyone over the internet by tunneling the development URL to a Ngrok URL which is life over the internet. You can check the documentation here.

To install Ngrok and get started, head over to its website and create an account if you don’t have one already. The image below is the Ngroks dashboard. Click on the download button to download Ngrok for your operating system and install it.

After installing Ngrok, you need to add your auth token to complete the installation. From a terminal, head over to the directory where Ngrok is, type the following to add your auth token

1./ngrok authtoken 4xhxxxxxxxxxxxxxxo_5ctoUpZxxxxxxxxeSUZ

This is an easy process. Take a closer look at the screenshot below, I navigated to my download folder which happened to be the directory where why Ngrok sits in.

After adding the auth token, We can now fire up Strapi locally and tunnel through Ngrok to the internet using the command below.

1./ngrok http 1337

Note that the 1337 as used above is my local environment port. This can be anything depending on what port your local project is running on.

This is what your screen should look like.

Create A Facebook App

We need a Facebook developer app to complete our authentication process. Let's create one. Head over to Facebook developer website using the link.

Click on My Apps link above and create your app. The process is straight forward and basically just requires providing names and redirection links.

Click on the create new app button at the top right corner of the page. This would popup a number of options on the type of Facebook application you want to create.

Select More options (this is the last option on the list), click on continue. It will take redirect to the screen below:

Select Something Else and click on the continue button to complete our app creation. With that done, It should take you to a screen that looks like the one below. The next thing we need to do is to add a product. Facebook offers more than one product to developers as you can see from the screen below:

We want to integrate Facebook Login into our Strapi application. We will add a Facebook login product to our app. To do this, clicking on the Facebook login setup button from the screen above. This would create it.

You can head over to the dashboard that looks like the image below.

To finish the process, click on the settings/basic and complete the form. Fill out the form.

Notice that the app domain provided is our Ngrok domain. The App ID and APP secret will come in handy later so keep that in mind. For the final phase, click on the Facebook Login product link we create earlier, from the drop down click on settings option. Add the redirect URL. This should also point to our Ngrok URL.

Strapi Facebook Auth Provider

To round it all up, in your Strapi application, click on Settings→Provider→Facebook.

Click on Facebook to edit and add all the necessary details.

Client ID above is the App ID from Facebook. The Client Secret is the App Secret from Facebook. Once again we used our Ngrok URL for our redirection URL. We have successfully finished our setups. Now let's test to see that everything works before we proceed. In your browser, type the following URL to test: https://localhost:1337/connect/facebook This URL will redirect you to the Facebook page where you will be required to enter your Facebook login details to continue.

This will redirect you to Facebook and prompt you to log in and grant all necessary permissions to continue.

Once the right login credentials are provided, the user would be redirected back to our ngrok provided URL and the user details saved in our Strapi database. You can find the user details registered in the Collection→Users.

Return user data.

User data stored in Strapi backend.

Single-page Application

In a real-world application, you would most likely have a front-end application that will communicate with Strapi API. This can be built with any of the many frontend solutions/frameworks (Nuxt.js, vue.js, React.js, Next.js, e.t.c.) In situations like this, you will need your Strapi application to redirect back to the front end of your application after authentication using Facebook.

Let us assume that your front end is ready and deployed successfully somewhere with a working URL. To complete the authentication process, we need to set our redirection URL to the URL of our front-end application. It's that simple. Instead of redirecting to our Ngrok temporary URL, we will redirect to the domain name of our front-end app.

Note: Your Ngrok URL would change each time you restart it. Remember to update the redirection URL in your Strapi dashboard with the new URL each time it changes while testing.

Create a Nuxt.js Application

To finish up this tutorial, let us create a Nuxt single page application to interact with our Strapi back-end. Use the following command:

using yarn:

1yarn create nuxt-app <project-name>

or using npm:

1npm init nuxt-app <project-name>

The project name above would be substituted with the actual name of our front-end application. when installation is done, start your Nuxt application using the command below:

1yarn dev

or

1npm run dev

Login Form

To log in, we need an HTML form or some sort of UI for the user experience. Let us go ahead and create one.

We would be needing https://fontawesome.com to add some nice Icons to our login button. Nuxt.js has a module for adding Fontawesome to Nuxt projects. Let us install it using the following command:

1yarn add @nuxtjs/fontawesome @fortawesome/free-solid-svg-icons @fortawesome/free-brands-svg-icons -D @fortawesome/fontawesome-svg-core

with the commands above, we can use both the paid and the free version of Fontawesome. We need to add Fontawesome to our Nuxt.js config file found at the root of our folder. Add the following code:

1  buildModules: [
2    '@nuxtjs/fontawesome',
3  ],
4
5fontawesome: {
6    component:'fa',
7    icons:{
8      solid: true,
9      brands: true
10    }
11  }

With this, our configuration is complete. Let us modify the landing page above to display our authentication form. Add the following lines of code to Pages→index.vue:

1<template>
2  <div class="container">
3    <div>
4      <!-- <Logo /> -->
5      <h1 class="title">Strapi-Auth</h1>
6      <div class="links">
7        <a
8          href="#"
9          target="_blank"
10          rel="noopener noreferrer"
11          class="button--grey"
12        >
13          <fa :icon="['fab', 'facebook']" />
14          Facebook
15        </a>
16      </div>
17    </div>
18  </div>
19</template>
20<script>
21export default {};
22</script>
23<style>
24.container {
25  margin: 0 auto;
26  min-height: 100vh;
27  display: flex;
28  justify-content: center;
29  align-items: center;
30  text-align: center;
31}
32.title {
33  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
34    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
35  display: block;
36  font-weight: 300;
37  font-size: 100px;
38  color: #35495e;
39  letter-spacing: 1px;
40}
41.subtitle {
42  font-weight: 300;
43  font-size: 42px;
44  color: #526488;
45  word-spacing: 5px;
46  padding-bottom: 15px;
47}
48.links {
49  padding-top: 15px;
50}
51</style>

By now, you should have something similar to mine:

We will use ngrok to make our Nuxt application available over the internet as we did above. The process is simple. Follow what we did above and it will work. The image below is the tunneling of my Nuxt application using Ngrok.

Let us add our Facebook login URL to the Facebook login button. This will redirect the user to the Facebook login page and prompt them to log in.

Open Pages→index.vue. Edit the code for the button like so:

1<div class="container">
2    <div>
3      <!-- <Logo /> -->
4      <h1 class="title">Strapi-Auth</h1>
5      <div class="links">
6        <a
7          href="http://localhost:1337/connect/facebook"
8          target="_blank"
9          rel="noopener noreferrer"
10          class="button--grey"
11        >
12          <fa :icon="['fab', 'facebook']" />
13          Facebook
14        </a>
15      </div>
16    </div>
17  </div>

In the code above, we add the Strapi Facebook login route. When the button is clicked, it should redirect to the Facebook authentication page where users would log in with their Facebook login details.

Redirection

Let us handle redirection after a successful registration. In our Strapi dashboard, we need to replace the redirect URL with the URL of our Nuxt.js frontend app. We can generate a Ngrok URL for our Nuxt app and use it to replace the redirection URL in our Strapi dashboard and that’s it. Remember that we are using Ngrok here because we do not have a Host plan and we are still working locally. If you have your application Hosted already then you have to replace the Ngrok address with your domain name. It's easy.

But first, let us create a home page to our Nuxt app. Our Nuxt application would redirect here: In our Nuxt application head on to Pages directory. Create a new page called home.vue. Add to following code snippet to flesh out the page:

1<template>
2  <div>
3    <div class="container">
4      <h1 class="title">Home!!</h1>
5    </div>
6    <div class="text">
7      <h3>You got here because your authentication was successful</h3>
8    </div>
9  </div>
10</template>
11<style>
12.container {
13  margin: 0 auto;
14  min-height: 100vh;
15  display: flex;
16  justify-content: center;
17  align-items: center;
18  text-align: center;
19}
20.text {
21  text-align: center;
22  margin-top: -20%;
23  color: #a5a5a5;
24}
25.title {
26  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
27    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
28  display: block;
29  font-weight: 300;
30  font-size: 100px;
31  color: #35495e;
32  letter-spacing: 1px;
33}
34</style>

It's just a simple HTML page with some CSS. Our Application should redirect here after successful authentication.

With this, we are good to go. Congrats you’ve made it this far.

Conclusion

By now you should be able to:

• Add Facebook authentication to your Strapi application
• Install and configure ngrok to tunnel your Strapi local URL to become accessible over the internet.
• Create a Facebook developer application
• Using Strapi Facebook authentication with Nuxt.js single page application.

Its time to go build something amazing. Cheers. Find link to the Strapi app and Nuxt.js app on GitHub respectively.