Strapi blog logo
  • Product

      Why Strapi?Content ArchitectureRoadmapIntegrationsTry live demo
      OverviewContent Types BuilderCustomizable APIMedia LibraryRoles & Permissions
      Discover Strapi Enterprise EditionDiscover our partners
  • Pricing

  • Solutions

      Static WebsitesMobile ApplicationsCorporate websitesEditorial SitesEcommerce
      Delivery HeroL'EquipeSociete GeneralePixelDustBanco International
      Discover all our user stories
  • Community

      CommunityWrite for the communityWall of LoveStrapi Conf 2021
      SlackGitHubYoutubeCommunity Forum
      Meet the Strapi Community StarsDiscover the Strapi Showcase
  • Resources

      BlogStartersNewsroomSupport
      Strapi AcademyTutorialsVideosWebinars
      The Guide to Headless CMS Strapi Community Forum
  • Docs

      InstallationConfigurationsDeploymentUpdate versionContent API
      Getting StartedContent ManagerContent-Types BuilderUsers, Roles & PermissionsPluginsSettings
      Developer DocumentationStrapi User Guide

Looking for our logo ?

Logo Brand download
Download Logo Pack
See more Strapi assets
Strapi blog logo
  • Product

    Product

    • Why Strapi?
    • Content Architecture
    • Roadmap
    • Integrations
    • Try live demo

    Features

    • Overview
    • Content Types Builder
    • Customizable API
    • Media Library
    • Roles & Permissions
    • Discover Strapi Enterprise Edition
    • Discover our partners
    Features cover

    Unlock the full potential of content management

    See all features
    Strapi Enterprise Edition

    Discover the advanced features included in Strapi Enterprise Edition.

    Get Started
  • Pricing
  • Solutions

    Solutions

    • Static Websites
    • Mobile Applications
    • Corporate websites
    • Editorial Sites
    • Ecommerce

    Stories

    • Delivery Hero
    • L'Equipe
    • Societe Generale
    • PixelDust
    • Banco International
    • Discover all our user stories
    Delivery Hero team

    Delivery Hero manages their partner portal with Strapi.

    Read their story
    turn 10 studios website

    How 1minus1 delivered a creative website for Turn10 Studios 25% faster with Strapi

    Discover their story
  • Community

    Community

    • Community
    • Write for the community
    • Wall of Love
    • Strapi Conf 2021

    Resources

    • Slack
    • GitHub
    • Youtube
    • Community Forum
    • Meet the Strapi Community Stars
    • Discover the Strapi Showcase
    Strapi Conf

    The first Strapi Global User Conference.

    Register now
    Write for the community

    Contribute on educational content for the community

    Discover the program
  • Resources

    Resources

    • Blog
    • Starters
    • Newsroom
    • Support

    Learning

    • Strapi Academy
    • Tutorials
    • Videos
    • Webinars
    • The Guide to Headless CMS
    • Strapi Community Forum
    Introducing Strapi Academy

    Everything you need to know to master Strapi.

    Go to the academy
    Strapi Repository on GitHub

    Get started with the Strapi repository

    Go to repository
  • Docs

    Developers

    • Installation
    • Configurations
    • Deployment
    • Update version
    • Content API

    User Guide

    • Getting Started
    • Content Manager
    • Content-Types Builder
    • Users, Roles & Permissions
    • Plugins
    • Settings
    • Developer Documentation
    • Strapi User Guide
    Install Strapi

    Install Strapi locally or wherever you need.

    Get Started
    Migration Guides Strapi

    Using a previous version of Strapi? Migrate to the latest.

    Read Guides
Get Started
Back to articles

Learning Strapi Authentication Flows with the Facebook Provider

 Strapi Authentication Flows with Facebook
  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email
Anumadu Moses

Anumadu Moses

March 23, 2021

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:

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

or using npm

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

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

yarn 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

./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.

./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:

yarn create nuxt-app <project-name>

or using npm:

npm 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:

yarn dev

or

npm 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:

yarn 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:

  buildModules: [
    '@nuxtjs/fontawesome',
  ],

fontawesome: {
    component:'fa',
    icons:{
      solid: true,
      brands: true
    }
  }

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:

<template>
  <div class="container">
    <div>
      <!-- <Logo /> -->
      <h1 class="title">Strapi-Auth</h1>
      <div class="links">
        <a
          href="#"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          <fa :icon="['fab', 'facebook']" />
          Facebook
        </a>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
.subtitle {
  font-weight: 300;
  font-size: 42px;
  color: #526488;
  word-spacing: 5px;
  padding-bottom: 15px;
}
.links {
  padding-top: 15px;
}
</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:

<div class="container">
    <div>
      <!-- <Logo /> -->
      <h1 class="title">Strapi-Auth</h1>
      <div class="links">
        <a
          href="http://localhost:1337/connect/facebook"
          target="_blank"
          rel="noopener noreferrer"
          class="button--grey"
        >
          <fa :icon="['fab', 'facebook']" />
          Facebook
        </a>
      </div>
    </div>
  </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:

<template>
  <div>
    <div class="container">
      <h1 class="title">Home!!</h1>
    </div>
    <div class="text">
      <h3>You got here because your authentication was successful</h3>
    </div>
  </div>
</template>
<style>
.container {
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.text {
  text-align: center;
  margin-top: -20%;
  color: #a5a5a5;
}
.title {
  font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: block;
  font-weight: 300;
  font-size: 100px;
  color: #35495e;
  letter-spacing: 1px;
}
</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.

  • Share on facebook
  • Share on linkedin
  • Share on twitter
  • Share by email

You might also be interested in...

Protected routes and Authentication with React and Node.js
  • Guides & Tutorials

Protected routes and Authentication with React and Node.js

Learn how you can protect your routes and authentication with React and Nodejs.

Cyril Lopez

Cyril Lopez

February 21, 2018

Strapi Authentication in Nuxt.js
  • Guides & Tutorials

Strapi Authentication in Nuxt.js

This is a step-by-step guide on how to implement Strapi-based authentication in a Nuxt.js app.

Rami Shashati

Rami Shashati

August 25, 2020

How to use the @nuxtjs/strapi Module to add Authentication to a Nuxt Application
  • Guides & Tutorials

How to use the @nuxtjs/strapi Module to add Authentication to a Nuxt Application

In this tutorial, you'll learn how to use the @nuxt/strapi Module to add Authentication to a Nuxt Application in 5 steps.

Alex Godwin

Alex Godwin

February 8, 2021

Newsletter

Sign up for the Strapi newsletter to keep up with the latest news from the Strapi community!

Unleash content.

Starters
Get Started

Strapi is the leading open-source Headless CMS. Strapi gives developers the freedom to use their favorite tools and frameworks while allowing editors to easily manage their content and distribute it anywhere.

Product

  • Why Strapi?
  • Content Architecture
  • Features
  • Enterprise Edition
  • Partner Program
  • Roadmap
  • Support
  • Try live demo
  • Changelog

Resources

  • How to get started
  • Meet the community
  • Tutorials
  • API documentation
  • GitHub repository
  • Starters
  • Strapi vs Wordpress
  • The Guide to headless CMS

Integrations

  • All integrations
  • React CMS
  • Next.js CMS
  • Gatsby CMS
  • Vue.js CMS
  • Nuxt.js CMS
  • Gridsome CMS
  • Flutter CMS
  • Hugo CMS
  • Typescript CMS

Company

  • About us
  • Blog
  • Careers
  • Contact
  • Newsroom
  • © 2021, Strapi
  • LicenseTermsPrivacy