Simply copy and paste the following command line in your terminal to create your first Strapi project.

Get Started

In this tutorial, we'll be building a [Next.js](https://strapi.io/integrations/nextjs-cms) application and authenticate that with [Strapi](https://strapi.io/) and [NextAuth](https://next-auth.js.org/).


# Introduction

[Strapi](https://strapi.io/) is the leading open-source headless CMS. It's 100% Javascript, fully customizable, and developer-first. I've been using Strapi for some of my [Open Source projects](https://github.com/ghoshnirmalya), and the developer experience is excellent. It has helped me build prototypes and products much faster.

[Next.js](https://strapi.io/integrations/nextjs-cms) is a [React](https://strapi.io/integrations/react-cms) framework for building Server-side rendered applications. It has many features with a good developer experience and supports TypeScript out of the box.

[NextAuth](https://next-auth.js.org/) is an authentication library built for use with Next.js. It's easy, fast, and secure.

The code for this tutorial is available on [GitHub](https://github.com/ghoshnirmalya/nextjs-authentication-using-strapi-and-next-auth).


# Software Required to Run the Application
1. [Docker](https://www.docker.com/) ([Click here to d](https://docs.docker.com/get-docker/)[ownload](https://docs.docker.com/get-docker/)[.](https://docs.docker.com/get-docker/))
2. [npm](https://www.npmjs.com/) ([Click here to d](https://nodejs.org/en/download/)[ownload](https://nodejs.org/en/download/)[.](https://nodejs.org/en/download/))
3. [yarn](https://classic.yarnpkg.com/) ([Click here to d](https://classic.yarnpkg.com/en/docs/install/#mac-stable)[ownload](https://classic.yarnpkg.com/en/docs/install/#mac-stable)[.](https://classic.yarnpkg.com/en/docs/install/#mac-stable))


# Creating a New Next.js Application

Let's start by creating a new Next.js application. We can create a Next.js application using the following command:

```shell
    yarn create next-app
```

The above command will ask for the name of the project. We'll call it “frontend”.

Once the setup of the project and installing all dependencies are complete, we can go inside the frontend directory and start the application using the following command:

```shell
    cd frontend && yarn dev
```

The above command will start the application on [http://localhost:3000/](http://localhost:3000/).


![Next.js Default Home Page](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/s_3_CA_45_A42_FBE_54_E8_C3_DBE_537_C7_DB_5_ED_734_AA_98969688_E39_DE_1_ABD_28_E204_BC_590_D_1603696450663_screely_1603696445310_1195100074.png)


# Creating a New Strapi Application

In this section, we'll create a new Strapi application using [Docker](https://www.docker.com/). [More information about how to create a new Strapi application using Docker can be obtained from their repository.](https://github.com/strapi/strapi-docker) We'll use [Postgres](https://www.postgresql.org/) to do this.

We can create a new directory and name it “backend” in the root of our project. We can create a new file `docker-compose.yml` inside the backend directory with the following content:


    # backend/docker-compose.yml
    
    version: '3'
    services:
      strapi:
        container_name: strapi
        image: strapi/strapi
        environment:
          - DATABASE_CLIENT=postgres
          - DATABASE_HOST=db
          - DATABASE_PORT=5432
          - DATABASE_NAME=strapi
          - DATABASE_USERNAME=strapi
          - DATABASE_PASSWORD=strapi
        ports:
          - 1337:1337
        volumes:
          - ./app:/srv/app
        depends_on:
          - db
      db:
        container_name: postgres
        image: postgres
        restart: always
        volumes:
          - ./db:/var/lib/postgresql/data
        ports:
          - 5432:5432
        environment:
          POSTGRES_USER: strapi
          POSTGRES_PASSWORD: strapi
          POSTGRES_DB: strapi

Now, we need to start Docker and run the following command inside the backend directory to create our new Strapi application:

```shell
    docker-compose up
```


- When running this image, Strapi will check if there is a project in the `/srv/app` folder of the container. If there is nothing, it will run the [S](https://strapi.io/documentation/v3.x/cli/CLI.html#strapi-new)[trapi new command](https://strapi.io/documentation/v3.x/cli/CLI.html#strapi-new) in the container `/srv/app` folder.


![Strapi Admin Console](https://paper-attachments.dropbox.com/s_503485BC0604981C01602F795632328FE6EB32BEAA3F420468854A65A271C965_1639224849346_Screenshot+from+2021-12-11+11-59-29.png)


Once the setup of our Strapi application is complete, we'll be able to view the administration panel at [http://localhost:1337/admin](http://localhost:1337/admin).

Next, we'll need to create our first administrator in order to log into the Strapi administration panel:


![Strapi Admin Registration](https://paper-attachments.dropbox.com/s_503485BC0604981C01602F795632328FE6EB32BEAA3F420468854A65A271C965_1639224879838_localhost_1337_admin_auth_register-admin+3.png)


Once we create our first administrator, we'll be logged into the Strapi administration panel:


![Strapi Admin Dashboard Home Page](https://paper-attachments.dropbox.com/s_503485BC0604981C01602F795632328FE6EB32BEAA3F420468854A65A271C965_1639224896938_localhost_1337_admin_auth_register-admin+4.png)



# Creating and Integrating Google OAuth Client into our Applications

In this section, we'll create a new [Google OAuth Client](https://console.developers.google.com/apis/credentials/oauthclient) and integrate it into Next.js and Strapi applications.

First, we'll need to visit the [Google Developer Console](https://console.developers.google.com/apis/credentials/oauthclient) to create a new OAuth Client and copy the credentials (Client ID and Client Secret) in our `frontend/**.env**` file:


1. Create a new **OAuth client ID**.
2. Choose “web application” as the **application type**.
3. Add the following **authorized redirect URLs**:


- `http://localhost:3000/api/auth/callback/google`
- `http://localhost:1337/connect/google/callback`


![Callback URL Settings](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/s_3_CA_45_A42_FBE_54_E8_C3_DBE_537_C7_DB_5_ED_734_AA_98969688_E39_DE_1_ABD_28_E204_BC_590_D_1603717222850_screely_1603717219342_1dceb50c82.png)


Once we click on the save button, we'll get our new OAuth Client's credentials. We can create a new file `.env` inside our frontend directory to store all the credentials:


    // frontend/.env
    
    NEXT_PUBLIC_API_URL=http://localhost:1337
    NEXT_PUBLIC_DATABASE_URL=postgres://strapi:strapi@localhost:5432/strapi?synchronize=true
    NEXTAUTH_URL=http://localhost:3000
    GOOGLE_CLIENT_ID="12345.apps.googleusercontent.com"
    GOOGLE_CLIENT_SECRET="1234-567-9"

You'll need to replace the values of `GOOGLE_CLIENT_ID` and `GOOGLE_CLIENT_SECRET` with the values of your new Google OAuth Client.

Next, let's add these credentials to our Strapi application as well. In the Strapi administration panel, we need to add the Google OAuth Client credentials and enable the **Google provider.** The values can be added in the **Providers** menu inside the **Settings** tab.

We need to enter the **Client ID** and **Client Secret** in the **Google provider** and **enable** that:


![Google Login Provider](https://paper-attachments.dropbox.com/s_503485BC0604981C01602F795632328FE6EB32BEAA3F420468854A65A271C965_1639225075272_localhost_1337_admin_auth_register-admin+7.png)



# Installing and Integrating NextAuth with Next.js and Strapi

In this section, we'll be [installing and integrating NextAuth](https://next-auth.js.org/).

We can run the following command inside our frontend directory to install NextAuth as a dependency:

```shell
    yarn add next-auth
```

Next, we'll need to create a new file, `...nextauth.js`, inside `frontend/pages/api/auth` directory with the following content:

    // frontend/pages/api/auth/[...nextauth].js
    
```js
    import NextAuth from "next-auth";
    import Providers from "next-auth/providers";
    
    const options = {
      providers: [
        Providers.Google({
          clientId: process.env.GOOGLE_CLIENT_ID,
          clientSecret: process.env.GOOGLE_CLIENT_SECRET,
        }),
      ],
      database: process.env.NEXT_PUBLIC_DATABASE_URL,
      session: {
        jwt: true,
      },
      callbacks: {
        session: async (session, user) => {
          session.jwt = user.jwt;
          session.id = user.id;
          return Promise.resolve(session);
        },
        jwt: async (token, user, account) => {
          const isSignIn = user ? true : false;
          if (isSignIn) {
            const response = await fetch(
              `${process.env.NEXT_PUBLIC_API_URL}/auth/${account.provider}/callback?access_token=${account?.accessToken}`
            );
            const data = await response.json();
            token.jwt = data.jwt;
            token.id = data.user.id;
          }
          return Promise.resolve(token);
        },
      },
    };
    
    const Auth = (req, res) =>
      NextAuth(req, res, options);
    
    export default Auth;
```

In the [NextAuth callback](https://next-auth.js.org/configuration/options#callbacks) function, we're calling the [Strapi Authentication API endpoint](https://strapi.io/documentation/v3.x/plugins/users-permissions.html#authentication). We're storing the JWT (`token.jwt`) and user ID (`data.user.id`) from the data that the Strapi API sends us. 

In this way, we can understand which user is currently authenticated.

We can get the details of the authenticated users from the `[getSession](https://next-auth.js.org/getting-started/client#getsession)` [function of NextAuth](https://next-auth.js.org/getting-started/client#getsession). If the `getSession` function doesn't return us any details, we can assume that the user is not authenticated.

We'll also need to add the [pg](https://www.npmjs.com/package/pg) package, so that NextAuth can connect to our database directly. We can install that package using the following command from our frontend directory:
`yarn add pg`

We can verify whether NextAuth is working with our application by updating our `frontend/pages/index.js` with the following content:


    // frontend/pages/index.js
    
```js
    import { getSession, signIn, signOut } from "next-auth/client";
    import Head from 'next/head';
    import Link from "next/link";
    import React from "react";
    
    const IndexPage = ({
      session,
    }) => {
      const signInButtonNode = () => {
        if (session) {
          return false;
        }
    
        return (
          <div>
            <Link href="/api/auth/signin">
              <button
                onClick={(e) => {
                  e.preventDefault();
                  signIn();
                }}
              >
                Sign In
              </button>
            </Link>
          </div>
        );
      };
    
      const signOutButtonNode = () => {
        if (!session) {
          return false;
        }
    
        return (
          <div>
            <Link href="/api/auth/signout">
              <button
                onClick={(e) => {
                  e.preventDefault();
                  signOut();
                }}
              >
                Sign Out
              </button>
            </Link>
          </div>
        );
      };
    
      if (!session) {
        return (
          <div className="hero">
            <div className="navbar">
              {signOutButtonNode()}
              {signInButtonNode()}
            </div>
            <div className="text">
              You aren't authorized to view this page
            </div>
          </div>
        )
      }
    
      return (
        <div className="hero">
          <Head>
            <title>Index Page</title>
          </Head>
          <div className="navbar">
            {signOutButtonNode()}
            {signInButtonNode()}
          </div>
          <div className="text">
            Hello world
          </div>
        </div>
      );
    };
    
    export const getServerSideProps = async ({ req }) => {
      const session = await getSession({ req });
      return {
        props: {
          session,
        },
      };
    };
    
    export default IndexPage;
```

Now, if we visit [http://localhost:3000/](http://localhost:3000/), we should be able to view the following screen:


![Next.js Sign In Page](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/s_3_CA_45_A42_FBE_54_E8_C3_DBE_537_C7_DB_5_ED_734_AA_98969688_E39_DE_1_ABD_28_E204_BC_590_D_1603726661880_screely_1603726655803_db12436eff.png)


We can log in using our Gmail account once we click on the **Sign In** button. Once we're signed in, we should be able to view the following screen on [http://localhost:3000/](http://localhost:3000/):


![Next.js Protected Page](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/s_3_CA_45_A42_FBE_54_E8_C3_DBE_537_C7_DB_5_ED_734_AA_98969688_E39_DE_1_ABD_28_E204_BC_590_D_1603726755418_screely_1603726749303_d5cf662fab.png)


All the details of the authenticated user are present in the **session** prop of the page:


![Next.js Sign out Page](https://d2zv2ciw0ln4h1.cloudfront.net/uploads/s_3_CA_45_A42_FBE_54_E8_C3_DBE_537_C7_DB_5_ED_734_AA_98969688_E39_DE_1_ABD_28_E204_BC_590_D_1603726884436_screely_1603726852445_0256760dc4.png)


We can show the details of the authenticated user by fetching the details from the **session** prop. Also, the authenticated user will now be visible in the Strapi administration panel:


![Strapi User Database](https://paper-attachments.dropbox.com/s_503485BC0604981C01602F795632328FE6EB32BEAA3F420468854A65A271C965_1639224556441_localhost_1337_admin_auth_register-admin+10.png)



# Conclusion

In this tutorial, we learned how we can authenticate a Next.js application using Strapi and NextAuth. We've worked with the [REST API](https://strapi.io/documentation/v3.x/content-api/api-endpoints.html) that Strapi provides out of the box. However, a similar solution can also be implemented for using [GraphQL](https://strapi.io/documentation/v3.x/plugins/graphql.html#usage).

The code for this tutorial is available on [GitHub](https://github.com/ghoshnirmalya/nextjs-authentication-using-strapi-and-next-auth). I've also created a [boilerplate for using Strapi with Next.js](https://github.com/ghoshnirmalya/nextjs-strapi-boilerplate). It'll help you get up and running with Strapi and Next.js really quickly. Feel free to give it a try.

Get started with Strapi by creating a project using a [starter](https://strapi.io/starters) or trying our [live demo](https://strapi.io/demo). Also, consult our [forum](https://forum.strapi.io/) if you have any questions. We will be there to help you.

The Tutorials section covers an introduction to Strapi, some advanced technical content, product updates and releases. From basic workaround to in-depth development guides. 

Tutorials

large_Strapi Next Auth.png

medium_Strapi Next Auth.png

small_Strapi Next Auth.png

thumbnail_Strapi Next Auth.png

Strapi Next Auth.png

The Product section covers our releases, feature reviews and more. 

Product

The Ecosystem section covers everything related to the world of Headless CMS and Strapi's place in it. 

Ecosystem

The latest Strapi-related news and major events happening for Strapi – including announcements, remote-work, organization and tips on running a start-up. 

Company

Get all the latest updates, news and events.

Subscribe to the newsletter 📣

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

Strapi Nuxy Auth upd.png

Strapi Authentication in Nuxt.js

In this tutorial you will learn the implementation process of Facebook as an authentication provider in Strapi using Ngrok.

Strapi Custom Plugin-3.jpg

Learning Strapi Authentication Flows with the Facebook Provider

In this tutorial, we'll be learning how to integrate authentication into our Strapi Application by building a simple Recipe Application with Strapi backend and Vue.js  frontend. 

Strapi Custom Plugin-16.jpg

Registration and Login (authentication) with Vue.js and Strapi

> This article is a guest post by [Anumadu Moses](https://twitter.com/alloyking_1). 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](/write-for-the-community)!

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

![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613080294787_createAdminCapture.PNG)


## 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](https://ngrok.com/docs).

To install [Ngrok](https://ngrok.com/) 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.


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613080924028_ngrokCapture.PNG)


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. 


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613081320823_ngrokauthtokenCapture.PNG)


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.


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613081923718_ngrokterninalCapture.PNG)



## Create A Facebook App

We need a Facebook developer app to complete our authentication process. Let's create one. Head over to [F](https://developers.facebook.com)[acebook developer](https://developers.facebook.com) website using the link. 


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613129301598_facebookAppCapture.PNG)


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. 

![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613142054083_optionsCapture.PNG)


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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1616159741196_facebookappMoreOptionsCapture.PNG)


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:


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1616160252590_addProductCapture.PNG)


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.


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613142529716_dashboardCapture.PNG)


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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613142892466_basicSetingCapture.PNG)


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. 


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1616161135953_addProductSettingCapture.PNG)



## Strapi Facebook Auth Provider

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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613143533127_providersCapture.PNG)


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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1616161490895_InkednuxtCallbackCapture_LI.jpg)




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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613145534288_facebookLanderCapture.PNG)


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.

![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613145816586_returnValueCapture.PNG)


User data stored in Strapi backend.

![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613145782742_saveduserCapture.PNG)



## 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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613746602623_nuxtCapture.PNG)

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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613755331830_nextCapture.PNG)


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.


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613994687398_nuxtNgrokCapture.PNG)


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

![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613987451935_facebookLanderCapture.PNG)

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


![](https://paper-attachments.dropbox.com/s_726454A18651000165F5AD35825738290F339AEF0D209DB0EF2F4A027FFD06A2_1613991290755_nuxtHomeCapture.PNG)

<iframe width="560" height="315" src="https://www.youtube.com/embed/YntuWF9MuWA" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

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](https://github.com/alloyking1/strapi_auth_provider/tree/master) app and [Nux](https://github.com/alloyking1/strapi_nuxt_frontend/tree/master)[t](https://github.com/alloyking1/strapi_nuxt_frontend/tree/master)[.js](https://github.com/alloyking1/strapi_nuxt_frontend/tree/master) app on GitHub respectively.

Get all the latest Strapi updates, news and events.

Join our Newsletter

User Authentication in Next.js with Strapi

thumbnail_download.png

download.png

Nirmalya is a Developer, who likes designing, writing and building Open Source stuffs.