Strapi + Provider authjs
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:
STRAPI_BASE_URLin.env: Add the Strapi environment variable to your .env fileruntimeConfig.STRAPI_BASE_URL-key innuxt.config.ts: Add the Strapi base url env variable to the runtime configauth-key innuxt.config.ts: Configure the module itself, e.g., where the auth-endpoints are, what origin the app is deployed to, ...- NuxtAuthHandler: Configure the authentication behavior, e.g., what authentication providers to use
For a production deployment, you will have to at least set the:
STRAPI_BASE_URLStrapi base URL for all API endpoints by default http://localhost:1337
- Create a
.envfile with the following lines:
// Strapi v4 url, out of the box
ORIGIN=http://localhost:3000
NUXT_SECRET=a-not-so-good-secret
STRAPI_BASE_URL=http://localhost:1337/api- Set the following options in your
nuxt.config.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, }, auth: { origin: process.env.ORIGIN, },});- Create the catch-all
NuxtAuthHandlerand add the this custom Strapi credentials provider:
// file: ~/server/api/auth/[...].tsimport 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 } }, }), ]});Checkout this blog-post for further notes and explanation: https://darweb.nl/foundry/article/nuxt3-sidebase-strapi-user-auth