Skip to content

Strapi + Provider authjs


communityauthjsstrapi
justserdar

This section gives an example of how the NuxtAuthHandler can be configured to use Strapi JWTs for authentication via the CredentialsProvider provider.

You have to configure the following places to make nuxt-auth work with Strapi:

For a production deployment, you will have to at least set the:

  1. Create a .env file with the following lines:
// Strapi v4 url, out of the box
AUTH_ORIGIN=http://localhost:3000
NUXT_SECRET=a-not-so-good-secret
STRAPI_BASE_URL=http://localhost:1337/api
  1. Set the following options in your nuxt.config.ts:
ts
export default defineNuxtConfig({
  runtimeConfig: {
    // The private keys which are only available server-side
    NUXT_SECRET: process.env.NUXT_SECRET,
    // Default http://localhost:1337/api
    STRAPI_BASE_URL: process.env.STRAPI_BASE_URL,
  },
})
  1. Create the catch-all NuxtAuthHandler and add the this custom Strapi credentials provider:
ts
// file: ~/server/api/auth/[...].ts
import CredentialsProvider from 'next-auth/providers/credentials'
import { NuxtAuthHandler } from '#auth'
const config = useRuntimeConfig()

export default NuxtAuthHandler({
  secret: config.NUXT_SECRET,
  providers: [
    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
    CredentialsProvider.default({
      name: 'Credentials',
      credentials: {}, // Object is required but can be left empty.
      async authorize(credentials: any) {
        const response = await $fetch(
          `${config.STRAPI_BASE_URL}/auth/local/`,
          {
            method: 'POST',
            body: JSON.stringify({
              identifier: credentials.username,
              password: credentials.password,
            }),
          }
        )

        if (response.user) {
          const u = {
            id: response.id,
            name: response.user.username,
            email: response.user.email,
          }
          return u
        }
        else {
          return null
        }
      },
    }),
  ]
})

Learn More

Checkout this blog-post for further notes and explanation: https://darweb.nl/foundry/article/nuxt3-sidebase-strapi-user-auth

Released under the MIT License.