In this tutorial, we’ll be learning how to integrate social authentication into our Strapi application. In order to do this we’ll be building a simple notes sharing application with Strapi backend and Nuxt.js frontend, we’ll also use Quill.js as our text editor, Nodemailer for emails, we’ll integrate infinite scrolling and many more features.

This is the second part of the tutorial series on social authentication with strapi. The first part was all about getting started, we looked at a couple of things like getting started with Strapi, installing Strapi, and building a backend API with Strapi.

What’ll you need for this tutorial:

• Basic knowledge of Vue.js
• Knowledge of JavaScript
• Node.js (v14 recommended for Strapi)
• MongoDB

Here’s what the final version of our application looks like

The GitHub repository for the front-end application can be found here, the repo for the back-end application can be found here.

Adding Login Providers

Table of contents

• GitHub authentication and getting our GitHub credentials
• Configuring the GitHub provider in our Strapi backend
• Facebook authentication and getting our Facebook credentials
• Configuring the Facebook provider in our Strapi backend
• Building the Home page
• Building the Login page
• Building the Nuxt.js frontend to handle redirects
• Building the user page

To learn more about adding login providers to your Strapi application, feel free to look at the official Strapi documentation. The documentation gives everything from login to JWT to adding 3rd parting providers.

GitHub authentication and getting our GitHub credentials

1. Visit the OAuth Apps list page https://github.com/settings/developers
2. Click on New OAuth App button
3. Fill the information
   • Application name: strapi-notes-app
   • Homepage URL: http://localhost:1337/
   • Application description: Strapi notes sharing application
   • Authorization callback URL: http://localhost:1337/connect/github/callback

Configuring the GitHub provider in our Strapi backend

1. Open up your Strapi application that’s hosted on http://localhost:1337
2. Click on Settings
3. Under settings, Click on Providers
4. Click on the GitHub provider
5. Fill the information (replace with your own client ID and secret):
   • Enable: ON
   • Client ID: YOUR_GITHUB_CLIENT_ID
   • Client Secret: YOUR_GITHUB_CLIENT_SECRET
   • The redirect URL to your front-end app: http://localhost:3000/connect/github

Facebook authentication and getting our Facebook credentials

1. Visit the Developer Apps list page https://developers.facebook.com/apps/
2. Click on Add a New App button
3. Fill the Display Name in the modal and create the app
4. Setup a Facebook Login product
5. Click on the PRODUCTS > Facebook login > Settings link in the left menu
6. Fill the information and save:
   • Valid OAuth Redirect URIs: https://localhost:1337/connect/facebook/callback
7. Then, click on Settings in the left menu
8. Then on Basic link
9. You should see your Application ID and secret, save them for later

Configuring the Facebook provider in our Strapi backend

1. Open up your Strapi application that’s hosted on http://localhost:1337
2. Click on Settings
3. Under settings, Click on Providers
4. Click on the Facebook provider
5. Fill the information (replace with your own client ID and secret):
   • Enable: ON
   • Client ID: YOUR_CLIENT_ID
   • Client Secret: YOUR_CLIENT_SECRET
   • The redirect URL to your front-end app: http://localhost:3000/connect/facebook

Building the Home page

Now, we can start building the frontend of our application. let’s start by building our components, but first let’s edit our layouts at layouts/default.vue.

• To begin, open up your Nuxt.js project,
• Head over to the layouts directory and open the default.vue file then fill it up with the following code.

1 <template>
2  <div>
3    <Nuxt />
4  </div>
5</template>
6<style>
7html {
8  font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI',
9    Roboto, 'Helvetica Neue', Arial, sans-serif;
10  font-size: 16px;
11  word-spacing: 1px;
12  -ms-text-size-adjust: 100%;
13  -webkit-text-size-adjust: 100%;
14  -moz-osx-font-smoothing: grayscale;
15  -webkit-font-smoothing: antialiased;
16  box-sizing: border-box;
17}
18*,
19*::before,
20*::after {
21  box-sizing: border-box;
22  margin: 0;
23}
24.button--green {
25  display: inline-block;
26  border-radius: 4px;
27  border: 1px solid #3b8070;
28  color: #3b8070;
29  text-decoration: none;
30  padding: 10px 30px;
31}
32.button--green:hover {
33  color: #fff;
34  background-color: #3b8070;
35}
36.button--green:focus {
37  outline: 0px !important;
38}
39.button--blue {
40  display: inline-block;
41  border-radius: 4px;
42  border: 1px solid skyblue;
43  color: blue;
44  text-decoration: none;
45  padding: 10px 30px;
46}
47.button--blue:hover {
48  color: #fff;
49  background-color: skyblue;
50}
51.button--blue:focus {
52  outline: 0px !important;
53}
54.ql-container.ql-snow {
55  border: 0px !important;
56}
57.quill-editor img {
58  margin: 0 auto;
59  width: 60%;
60}
61.ql-toolbar {
62  position: sticky;
63  top: 0;
64  z-index: 100;
65  background: white;
66  color: #fff;
67  border: 0px !important;
68}
69.quill-editor {
70  min-height: 200px;
71  padding: 10%;
72  overflow-y: auto;
73}
74.hex {
75  z-index: 9999999999;
76  background: rgba(0, 0, 0, 0.5);
77  overflow: hidden;
78  position: fixed;
79}
80</style>

• Open up the index.vue file in the pages directory,
• Fill it up with the following code.

1    <template>
2      <div
3        class="min-h-screen flex justify-center items-center text-center mx-auto sm:pl-24 bg-yellow-200"
4      >
5        <div class="w-1/2 sm:text-left sm:m-5">
6          <div>
7            <h1
8              class="text-3xl sm:text-6xl font-black sm:pr-10 leading-tight text-blue-900"
9            >
10              Welcome to the NoteApp
11            </h1>
12            <p class="sm:block hidden my-5">
13              Your number one notes sharing application
14              <br />
15              Share your notes with anybody across the globe
16            </p>
17          </div>
18          <div class="links">
19            <NuxtLink to="/login" class="button--blue shadow-xl"> Login </NuxtLink>
20          </div>
21        </div>
22        <div class="w-1/2 hidden sm:block">
23          <img
24            class=""
25            src="~assets/undraw_Sharing_articles_re_jnkp.svg"
26          />
27          
28        </div>
29      </div>
30    </template>
31    <script>
32    export default {}
33    </script>
34    <style>
35    /* Sample `apply` at-rules with Tailwind CSS
36    .container {
37    @apply min-h-screen flex justify-center items-center text-center mx-auto;
38    }
39    */
40    .container {
41      margin: 0 auto;
42      min-height: 100vh;
43      display: flex;
44      justify-content: center;
45      align-items: center;
46      text-align: center;
47    }
48    .title {
49      font-family: 'Quicksand', 'Source Sans Pro', -apple-system, BlinkMacSystemFont,
50        'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
51      display: block;
52      font-weight: 300;
53      font-size: 100px;
54      color: #35495e;
55      letter-spacing: 1px;
56    }
57    .subtitle {
58      font-weight: 300;
59      font-size: 42px;
60      color: #526488;
61      word-spacing: 5px;
62      padding-bottom: 15px;
63    }
64    .links {
65      padding-top: 15px;
66    }
67    </style>

With the above code we’ve built the homepage of our notes sharing application, the next task is to build a login page, from which users can login into our application.

Building the Login page

Execute the following code to create a login.vue file.

1cd pages
2touch login.vue

Fill up the login.vue file with the code below

1<template>
2  <div
3    class="min-h-screen flex justify-center items-center text-center mx-auto sm:pl-24 bg-yellow-200"
4  >
5    <div class="w-1/2 hidden sm:block m-5 p-6">
6      <img src="~assets/undraw_secure_login_pdn4.svg" />
7    </div>
8    <div class="sm:w-1/2 w-4/5">
9      <h2 class="m-5 font-black text-3xl">Social Login</h2>
10      <div class="shadow-xl bg-white p-10">
11        <a
12          href="http://localhost:1337/connect/github"
13          class="cursor-pointer m-3 button--blue shadow-xl"
14        >
15          <span><font-awesome-icon :icon="['fab', 'github']" /></span>
16          Github
17        </a>
18        <a
19          href="https://localhost:1337/connect/facebook"
20          class="cursor-pointer m-3 button--blue shadow-xl"
21        >
22          <span>
23            <font-awesome-icon :icon="['fab', 'facebook']" />
24          </span>
25          Facebook
26        </a>
27      </div>
28    </div>
29  </div>
30</template>
31<script>
32export default {}
33</script>
34<style lang="scss" scoped></style>

In the code above, we create links to our Strapi backend’s Facebook and GitHub logic using <a><a/> tags. When a user clicks on the link, our login logic is ready to execute. We are also using font-awesome to display icons, let’s see how to do that:

Installing and using nuxt-fontawesome

In your terminal, execute the following code to install font-awesome

1yarn add nuxt-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons. //using yarn
2
3npm i nuxt-fontawesome @fortawesome/free-brands-svg-icons @fortawesome/free-solid-svg-icons //using npm

• Open up your nuxt.config.js file, and add the following lines of code

1modules : [
2  //... other modules
3  [
4      'nuxt-fontawesome',
5      {
6          imports: [
7              {
8                  set: '@fortawesome/free-solid-svg-icons',
9                  icons: [ 'fas' ]
10              },
11              {
12                  set: '@fortawesome/free-brands-svg-icons',
13                  icons: [ 'fab' ]
14              }
15          ]
16      }
17  ],
18]

Now we should see the Facebook and GitHub icons displayed correctly.

Building the Nuxt.js frontend to handle redirects

Execute the following

1cd pages
2mkdir connect
3touch _provider.vue

Open up the _provider.js file and add the following code

1<template>
2  <div>
3    <h1>user page</h1>
4  </div>
5</template>
6<script>
7
8export default {
9  data() {
10    return {
11      provider: this.$route.params.provider,
12      access_token: this.$route.query.access_token,
13    }
14  },
15  async mounted() {
16    const res = await this.$axios.$get(
17      `/auth/${this.provider}/callback?access_token=${this.access_token}`
18    )
19    
20    const { jwt, user } = res
21    // store jwt and user object in localStorage
22    this.$auth.$storage.setUniversal('jwt', jwt)
23    this.$auth.$storage.setUniversal('user', { username: user.username, id: user.id, email: user.email })
24
25    this.$router.push(`/users/${user.id}`)
26  },
27}
28</script>
29<style lang="scss" scoped></style>

In the code segment above, we’re handling redirects from the Strapi backend, Nuxt.js has a routing pattern that we’re taking advantage of /connect/_provider where provider could be GitHub or Facebook in our case or any other 3rd party login provider.

We get an access token from the provider which we store as access_token, then we make an API call to the backend in the mounted lifecycle method which returns a response that contains the user and a JWT. We then store the user and JWT in both cookies and localStorage using a package called @nuxtjs/auth-next.

Finally we redirect to the user account page where they can create a note and view their existing notes if any is available. Before we create the user page, lets see how to install and use the @nuxtjs/auth-next package.

Installing and using @nuxtjs/auth-next

Execute the following to install @nuxtjs/auth-next

1yarn add @nuxtjs/auth-next //using yarn
2
3npm install @nuxtjs/auth-next //using npm

Open up your nuxt.config.js file and add the following code

1modules: [
2  //...other modules
3  '@nuxtjs/auth-next',
4]

Building the user page

Execute the following

1cd pages
2mkdir user
3touch _id.vue

Open up the _id.vue file and fill it up with the following code

1<template>
2  <div>
3    <Nav/>
4    <div class="sm:w-2/3 w-4/5 mt-10 mx-auto">
5      <button class="button--blue" @click="createNewNote">Create Note</button>
6      <h1 class="my-5 text-2xl font-black">Your Notes</h1>
7      <div v-if="notes" class="mx-auto sm:grid grid-cols-3 gap-2">
8        <div
9          v-for="(note, i) in notes"
10          :key="i"
11          class="rounded border-5 border-blue-400 p-10 sm:flex shadow-lg h-48 items-center justify-center text-center"
12        >
13        <NuxtLink :to="`/notes/${note.id}`">
14          <h1 class="text-xl">
15            {{ note.title }}
16          </h1>
17        </NuxtLink>
18        
19        </div>
20      </div>
21      <infinite-loading  spinner="spiral" @infinite="infiniteHandler" />
22    </div>
23  </div>
24</template>
25<script>
26export default {
27  async asyncData({ $strapi, route, $axios, $auth }) {
28    const user = await $axios.$get(`/users/${ route.params.id }`, {
29      headers: {
30        Authorization: `Bearer ${ $auth.$storage.getUniversal('jwt') }`
31      }
32    })
33    const notes = await $strapi.$notes.find({
34      'users_permissions_user.id': route.params.id,
35      _sort: `published_at:DESC`,
36      _start: `0`,
37      _limit: `3`
38    })
39    return { notes, user }
40  },
41  data() {
42    return {
43      title: `New Note`,
44      content: `<p>Start Writing</p>`,
45      start: 3,
46      limit: 3,
47      token: this.$auth.$storage.getUniversal('jwt')
48    }
49  },
50  methods: {
51    async createNewNote() {
52      const newNote = await this.$axios.$post(`/notes`, {
53        title: this.title,
54        content: this.content,
55        users_permissions_user: this.user,
56        Editors: [],
57      },
58      {
59        headers: {
60          Authorization: `Bearer ${ this.token }`
61        }
62      }
63      )
64      console.log(newNote)
65      this.$router.push(`/notes/${newNote.id}`)
66    },
67    async infiniteHandler($state) {
68      const newData = await this.$strapi.$notes.find({
69        'users_permissions_user.id': this.$route.params.id,
70        _sort: `published_at:DESC`,
71        _start: `${this.start}`,
72        _limit: `${this.limit}`
73      })
74      if(newData.length) {
75        this.start += this.limit
76        this.notes.push(...newData)
77        $state.loaded()
78      } else {
79        $state.complete()
80      }
81    },
82  },
83}
84</script>
85<style lang="scss" scoped></style>

Here, we just build our user page. We fetch the user and their notes from our Strapi backend, then display the notes appropriately and also enable the user create a new note. We are also integrating infinite scrolling for our notes, and we’re using both the @nuxtjs/axios and @nuxtjs/strapi packages for fetching data from the backend.

Setting up @nuxtjs/axios

@nuxtjs/axios is automatically integrated with Nuxt.js if you chose the option while installing Nuxt.js. We just have to set up our baseURL .

Open up your nuxt.config.js file and add the following lines of code.

1// Axios module configuration: https://go.nuxtjs.dev/config-axios
2axios: {
3    baseURL: 'https://strapi-notesapp.herokuapp.com'
4},

Installing and Setting up @nuxtjs/strapi

Execute the following lines of code to install @nuxtjs/strapi.

1yarn add @nuxtjs/strapi //using yarn
2
3npm install @nuxtjs/strapi //using npm

Open up your nuxt.config.js file and add the following lines of code.

1modules: [
2  //...other modules
3  @nuxtjs/strapi
4]
5
6strapi: {
7    entities: [ 'notes', 'users' ],
8    url: 'http://localhost:1337'
9}

Installing and using vue-infinite-loading

Vue-infinite-loading is a package that allows us integrate infinite scrolling into our application.

Execute the following lines of code to install @nuxtjs/strapi.

1yarn add vue-infinite-loading //using yarn
2
3npm install vue-infinite-loading //using npm

Open up your nuxt.config.js file and add the following lines of code.

1plugins: [
2  //...other plugins
3  {
4    src: '~/plugins/infiniteloading',
5    ssr: false
6  }
7]

Create a file called infiniteloading.js in the plugins directory and fill it up with the following code.

1import Vue from 'vue'
2import InfiniteLoading from 'vue-infinite-loading'
3Vue.component('InfiniteLoading', InfiniteLoading)

Building the Nav component

Execute the following to create a Nav.vue file

1cd components
2touch Nav.vue

Open up the Nav.vue file and fill it up with the following code.

1<template>
2  <div class="p-6 mb-4 shadow-lg bg-dark">
3    <div class="sm:w-2/3 mx-auto flex justify-between items-center">
4        <div>
5            <h1> NotesApp </h1>
6        </div>
7        <div class="flex sm:space-x-5 space-x-2 items-center">
8            <NuxtLink :to="`/users/${userId}`">
9             <p v-if="username"><span><font-awesome-icon :icon="['fas', 'user']" /></span> {{ username }}</p>
10            </NuxtLink>
11            <button class="button--blue" @click="logout" v-if="username" > Logout </button>
12            <NuxtLink class="button--green" v-if="!username" to="/login" > Sign in </NuxtLink>
13        </div>
14    </div>
15    
16  </div>
17</template>
18<script>
19export default {
20  name: 'Nav',
21  data() {
22    return {
23      username: this.$auth.$storage.getUniversal('user')?.username,
24      userId: this.$auth.$storage.getUniversal('user')?.id
25    }
26  },
27  methods: {
28    logout() {
29      this.$auth.$storage.removeUniversal('user')
30      this.$auth.$storage.removeUniversal('jwt')
31      this.$router.push(`/login`)
32    },
33  },
34}
35</script>
36<style scoped></style>

Conclusion

We’ve come to the end of the second article, in the next article we’ll look at how we can integrate vue-quill-editor to enable users create contents, image uploads, copying links and email sharing.

This tutorial is divided into 3 parts

• 1- Getting started ✅
• 2- Adding Login Providers ✅
• 3- Customization ⏭️

This article is a guest post by Alex Godwin. He wrote this blog post through the Write for the Community program.