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.

Nuxt 3+.

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. yourapp.kinde.com.

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

npm i @nuxtjs/kinde

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_CLIENT_ID=<your_kinde_client_id>
NUXT_KINDE_CLIENT_SECRET=<your_kinde_client_secret>
NUXT_KINDE_AUTH_DOMAIN=https://<your_kinde subdomain>.kinde.com
NUXT_KINDE_REDIRECT_URL=http://localhost:3000/api/callback
NUXT_KINDE_LOGOUT_REDIRECT_URL=http://localhost:3000
NUXT_KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/dashboard

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

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.

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>

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

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

NUXT_KINDE_POST_LOGIN_REDIRECT_URL=<where_your_project_is_running>

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">
	definePageMeta({
	  middleware: ['auth-logged-in'],
	})
</script>

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

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

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

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

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

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

{{ $auth.user }}

// returns
{
	id: "kp_12345556666",
	given_name: "Sally",
	family_name: "Smith",
	email: "sally.smith@example.com",
	picture: "https://lh3.googleusercontent.com/a/1234",
	updated_at: 1697769735
}

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
</NuxtLink>

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>

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

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.

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 support@kinde.com or join the Kinde community on Discord or Slack.