The Nuxt Kinde module allows developers to integrate Kinde authentication into their existing Nuxt projects.

For new projects, you can also find our Starter Kit on GitHub.

Supported versions

Link to this section

Nuxt 3+.

Register with Kinde

Link to this section

If you haven’t already got a Kinde account, register for free here (no credit card required). Registering gives you a Kinde domain, which you need to get started, e.g.

Install the module

Link to this section

Install the @nuxtjs/kinde dependency using your package manager of choice.

npm i @nuxtjs/kinde

Integrate with your app

Link to this section

Add @nuxtjs/kinde to the modules section of your nuxt.config.ts.

export default defineNuxtConfig({
    modules: ["@nuxtjs/kinde"]

Add the following values to your .env file. If you don’t have one create a file in the root of your project.

NUXT_KINDE_AUTH_DOMAIN=https://<your_kinde subdomain>

Replace http://localhost:3000 with the URL where your project is running.

Set callback URLs

Link to this section

For your app to work with Kinde, you need to set callback and logout redirect URLs.

Replace the values you see in <code brackets> with your own values.

  1. In Kinde, go to Settings > Applications.
  2. Select View details on your app.
  3. Scroll down to the Callback URLs section.
  4. Add in the callback URLs for your project, which might look something like this:
    • Allowed callback URLs (also known as Redirect URIs)- <http://localhost:3000>/api/callback>
    • Allowed logout redirect URLs - <http://localhost:3000>
  5. Select Save.

Tip: Make sure there are no hidden spaces in URLs and remove the ‘/’ backslash at the end.

If you would like to use different Environments as part of your development process, you will need to add them within your Kinde business first. You will also need to add the Environment subdomain to the code block above.

Sign in and sign up

Link to this section

Kinde supports an easy to implement login / register flow.

Use the button examples below to redirect your users to Kinde, where they authenticate before being redirected back to your site.

<NuxtLink to="/api/login" external>
	Sign in

<NuxtLink to="/api/register" external>
	Sign up

Redirect after authentication

Link to this section

After your user has authenticated they will be redirected to the URL set in your .env file


Protecting pages

Link to this section

It’s likely that your project will have both pages that are publicly available and private ones which should only be available to logged in users. Add this code snippet to pages you would like to protect.

<script setup lang="ts">
	  middleware: ['auth-logged-in'],

Check if the user is authenticated

Link to this section

You can check if a user is logged in with the $auth.loggedIn context.

<p v-if="$auth.loggedIn">
	I'm signed in!
<p v-else>
 I'm signed out :(

This is implemented in much the same way as signing up or signing in.

<NuxtLink to="/api/logout" external>
    Sign out

Register your first user by signing up yourself. You’ll see your newly registered user on the Users page in Kinde.

Get user information

Link to this section

User details can be found on the $auth.user object

{{ $auth.user }}

// returns
	id: "kp_12345556666",
	given_name: "Sally",
	family_name: "Smith",
	email: "",
	picture: "",
	updated_at: 1697769735

Create an organization

Link to this section

To have a new organization created within your project, you can use the register api end point and pass is_create_org="true". This will redirect the user to Kinde and create an organization with them as a member.

<NuxtLink to="/api/register?is_create_org=true" external>
    Register and create org

Sign users up or in to an organization

Link to this section

When a user signs up or in to an organization, the org_code needs to be passed with the request. The org_code refers to the one created automatically in Kinde when the organization was created.

Here’s an helper function for registering or signing in below using org_0e9f496742ae as an example:

<NuxtLink to="/api/login?org_code=org_code=org_0e9f496742ae" external>
	Sign in to org

<NuxtLink to="/api/regiser?org_code=org_0e9f496742ae" external>
	Sign up to org

Because a user can belong to multiple organizations, and because they may have different permissions for the different organizations, we will pass you both the org_code and permissions back in the token when authentication is initiated like this.

More coming to the Nuxt module

Link to this section

We’re working on expanding this module for other features, including:

  • Feature flags
  • Permissions
  • Kinde management API

If you need help using Kinde, please contact us at or join the Kinde community on Discord or Slack.

Talk to us

If you can’t find what you’re looking for in our help center — email our team

Contact support