How to Set Up Social Authentication with Strapi and Nuxt.js

Enhancing security is a critical aspect of every development process. But it’s crucial to make your apps accessible for users signing up for the application.

So, creating a seamless experience for users while they sign up and maintaining security throughout the process is key. This is why many web developers are adopting social authentication today.

In this article, I’ll walk you through setting up social authentication on a Strapi project using GitHub. Then we’ll integrate it into a simple Nuxt.js setup.

Here’s what we’ll cover:

• What is Social Authentication?

  • What is Strapi?

  • What is Nuxt.js?

  • What Will You Learn in This Guide?

• Prerequisites

• How to Set Up Strapi for Social Authentication

  • How to Set Up Strapi’s Providers

  • How to Create GitHub’s Oauth App

  • How to Connect Github OAuth APP to Provider on Strapi

  • How to Test the Strapi API

• How to Set Up Nuxt.js for Social Authentication

• Conclusion

What is Social Authentication?

Social authentication leverages familiar social media accounts so that users don’t need to remember another username-password combination. Instead of creating a unique username and password for every website, users can log in via their accounts from popular platforms like Google, Facebook, Twitter, or GitHub.

You can set this up using OAuth. It’s a widely adopted protocol that allows websites to access limited user data without exposing sensitive credentials. It also helps eliminate barriers in the signup or login process, lowering the chances that people will abandon the site. Users can quickly log in with a few clicks, making onboarding smoother and reducing form fatigue.

Social auth also enhances the app's overall security by offloading certain responsibilities to trusted providers who already employ strong security protocols.

What is Strapi?

Strapi is an open-source headless content management system (CMS) built with Node.js. It allows developers to manage and deliver content through APIs (REST or GraphQL) while providing a customizable and extendable platform.

Strapi is popular for its flexibility (it works with various front-end frameworks) and plugin system, making adding features like social authentication easy.

What is Nuxt.js?

Nuxt.js is a powerful Vue.js framework designed for building modern web applications with server-side rendering (SSR), static site generation, and powerful client-side routing. You can use it to create high-performance, SEO-friendly, and scalable applications.

Nuxt’s modular structure and ease of integration with APIs make it ideal for building complex front-end applications, such as those that require social authentication.

What Will You Learn in This Guide?

This guide will walk you through implementing social authentication using Strapi v5 and Nuxt.js. You’ll learn how to:

• Set up OAuth for social logins

• Configure Strapi to handle social authentication

• Integrate the functionality smoothly into an existing Nuxt.js front-end

Prerequisites

Before diving into the tutorial, make sure you have the necessary foundational knowledge and tools:

1. Basic knowledge of Node.js, Vue.js, and Nuxt.js: Familiarity with these technologies is crucial, as Strapi is built on Node.js, and Nuxt.js is a Vue.js-based framework. To navigate through the integration process, you’ll need a general understanding of how Node.js handles server-side logic and how Vue.js works on the front end.

2. Familiarity with REST APIs or GraphQL (optional but helpful): Strapi provides both REST and GraphQL APIs to handle data and authentication. While this guide will focus primarily on REST APIs for social authentication, knowing how APIs work and how to make HTTP requests is useful. If you’re familiar with GraphQL, you could optionally use it for more complex queries and authentication handling.

3. Social Provider Developer Accounts: To integrate social authentication, you must create developer accounts on the social platforms you want to support (like Google, Facebook, or GitHub). You’ll need API keys or client IDs from each provider. In this tutorial, you’ll learn how to use GitHub for this functionality.

How to Set Up Strapi for Social Authentication

If you haven’t already created a Strapi project, let’s start by generating a new one.

You can create a new Strapi project with Yarn (recommended). Run the following command in your terminal:

yarn create strapi-app@latest my-project

Or with npm:

npx create-strapi-app@latest my-project

Respond ‘yes” to all the prompts:

You should now have a fresh Strapi 5 application with a default SQLite database. To spin it up in development mode, open your project and run:

yarn run develop

Once the project is up and running, Strapi will automatically launch in your browser at http://localhost:1337/admin. The first step is to create an admin account to access the Strapi admin panel:

Fill out the required fields and create your admin user. Once you’re logged in, you’ll have access to the full Strapi admin interface, where you can manage content types, plugins, and settings:

How to Set Up Strapi’s Providers

For social authentication, Strapi's Users & Permissions plugin is essential and already comes pre-installed with the default setup. Click on Settings in the Strapi admin panel:

Scroll down and Click on Providers in the Users & Permissions plugin section:

You will see this list of Providers to select from. For this article, select GitHub by clicking the pen icon on the right:

By default, it is set to “false”, Toggle it to True. Take note of the redirect URL and copy it.

How to Create GitHub’s Oauth App

On a different browser tab, log in to your GitHub account and click on your settings:

Then navigate to your Developer Settings:

Select OAuth Apps and New OAuth app:

As you can see below, the redirect URL will be pasted as the Authorization callback URL and the homepage URL will be your App URL.

Go ahead and click “Register application”, and you will see your Client ID. Now you need to generate your Client Secret:

How to Connect Github OAuth APP to Provider on Strapi

Once your Client Secret has been generated, update the application and return to your Strapi App to input them. The redirect URL to your front-end app will be http://localhost:3000/connect/github.

You can save everything now, and your GitHub Provider should be enabled.

You can set up as many providers as you wish.

To allow users to authenticate with social logins, you need to update the default public role in Strapi.

Click Roles right above Providers:

Select the Public role and ensure that the connect and callback permissions are enabled. They are already enabled by default in Strapi 5.

Click Save after updating the permissions. At this point, you’ve set up the necessary social authentication providers. Before proceeding with Nuxt.js integration, you can test it by making an API request using a tool like Postman.

How to Test the Strapi API

Send a GET request to http://localhost:1337//api/connect/github/.

You will notice from the Console that it’s reaching for a GitHub login client. Copy the whole URL and paste it into your browser. You should see an interface like this:

If you got this, congrats! You can now move on to setting up your Nuxt.Js frontend application.

How to Set Up Nuxt.js for Social Authentication

In this section, you will learn how to set up the authentication flow between Nuxt.js and Strapi, handle the OAuth redirects, and display a login button for users to authenticate.

First, you’ll need to install Nuxt.js by running one of these commands:

yarn create nuxt-app //using yarn

npx create-nuxt-app //using npx

npm init nuxt-app //using npm

Visit the Nuxt.js docs if you need a refresher.

Open your project and run npm run dev to get it started:

Once running, visit https://localhost:3000 on your browser and you should see a Nuxt page that looks like this:

In your code editor, delete the Tutorial.vue in the components folder and go to index.vue in the pages folder. There, you’ll want to add the following:

<script>

export default {}

script>

<style>

/* Sample apply at-rules with Tailwind CSS

.container {

@apply min-h-screen flex justify-center items-center text-center mx-auto;

}

*/

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

This code provides you with a simple homepage and a link to the login page which currently leads to a 404 page. In your pages folder, create login.vue and add the following code:

  <script>

  export default {}

  script>

  <style lang="scss" scoped>style>

In lines 11 - 14, the user can click the link and have the login logic executed. But you need to ensure that Nuxt can handle redirects.

In your pages folder, create a folder called connect, and then inside that a file named _provider.vue, and add the following code to handle the callback function:

<script>


export default {

  data() {

    return {

      provider: this.$route.params.provider,

      access_token: this.$route.query.access_token,

    }

  },

  async mounted() {

    const res = await this.$axios.$get(

      /auth/${this.provider}/callback?access_token=${this.access_token}

    )



    const { jwt, user } = res

    // store jwt and user object in localStorage

    this.$auth.$storage.setUniversal('jwt', jwt)

    this.$auth.$storage.setUniversal('user', { username: user.username, id: user.id, email: user.email })


    this.$router.push(`/users/${user.id}`)

  },

}

script>

<style lang="scss" scoped>style>

So far, your folder/file structure should look like this:

The code in _provider.vue handles redirects from the Strapi backend. Nuxt.js has a routing pattern that takes advantage of /connect/*provider where, in this case, the provider is GitHub.

It gets an access token which is stored as access_token, then makes an API call to the backend in the mounted lifecycle method. This returns a response that contains the user and a JWT. It stores the user and JWT in both cookies and localStorage using a package called @nuxtjs/auth-next, then redirects the user to the user account page.

You’ll need to install the @nuxtjs/auth-next module using the following command:

npm install @nuxtjs/auth-next //using npm

Or with yarn:

yarn add @nuxtjs/auth-next //using yarn

After installing, open your nuxt.config.js file and configure the Auth modules:

export default {
modules: [
   '@nuxtjs/auth-next',
 ],

Next, you’ll need the @nuxtjs/axios and @nuxtjs/strapi packages to fetch data from the backend. @nuxtjs/axios is already integrated when installing Nuxt, but you have to set your baseurl.

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

// Axios module configuration: https://go.nuxtjs.dev/config-axios
axios: {
    baseURL: 'http://localhost:1337'
},

Then install @nuxtjs/strapi using the following command:

yarn add @nuxtjs/strapi //using yarn

Or:

npm install @nuxtjs/strapi //using npm

Replace the content of your nuxt.config.js file with the following lines of code:

export default {
// Global page headers: https://go.nuxtjs.dev/config-head

  head: {

    title: 'nuxtstrapi',

    htmlAttrs: {

      lang: 'en'

    },

    meta: [

      { charset: 'utf-8' },

      { name: 'viewport', content: 'width=device-width, initial-scale=1' },

      { hid: 'description', name: 'description', content: '' },

      { name: 'format-detection', content: 'telephone=no' }

    ],

    link: [

      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

    ]

  },

  // Global CSS: https://go.nuxtjs.dev/config-css

  css: [

  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins

  plugins: [

  ],

  // Auto import components: https://go.nuxtjs.dev/config-components

  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules

  buildModules: [

    // https://go.nuxtjs.dev/typescript

    '@nuxt/typescript-build',

  ],

  // Modules: https://go.nuxtjs.dev/config-modules

  modules: [

    '@nuxtjs/auth-next',

    '@nuxtjs/axios',

    '@nuxtjs/strapi'

  ],

  axios: {

    baseURL: 'http://localhost:1337'

  },

  strapi: {

    entities: [ "articles', 'users' ],

    url: 'http://localhost:1337'

},

  // Build Configuration: https://go.nuxtjs.dev/config-build

  build: {

  }

}

Run both your front end and Strapi app to test the login authentication. When you go to your Strapi admin and check User under Content Manager, you should see the newly authenticated user.

Conclusion

At this point, you have successfully set up your Strapi application with social authentication. Now you can add as many providers as you want and customize your applications to serve your needs.

Thanks for reading!