Astro Kinde Integration

This package provides an Astro integration for Kinde, simplifying the process of adding authentication to your Astro application using Kinde's OAuth 2.0 flow.

Features

• Easy setup and configuration
• Automatically injects authentication routes
• Provides authentication state in Astro pages
• Integrates with Kinde Management SDK for user and application management

Installation

1. Create a Kinde back-end web account and set the following environment variables:

KINDE_MANAGEMENT_CLIENT_ID=your_management_client_id
KINDE_MANAGEMENT_CLIENT_SECRET=your_management_client_secret
KINDE_DOMAIN=your_kinde_domain

2. Install the package:

npm install astro-kinde

3. Add the integration to your astro.config.mjs:

import { defineConfig } from "astro/config";
import { kinde } from "kinde-astro";

export default defineConfig({
    integrations: [kinde()],
});

4. Setup your env.d.ts

/// <reference types="astro/client" />

declare namespace App {
    interface Locals {
        isAuthenticated: boolean;
        accessToken: string | undefined;
    }
}

Configuration

Configure the integration by passing options to the kinde function in astro.config.mjs.

import dotenv from "dotenv";

dotenv.config();

kinde({
    clientId: process.env.KINDE_MANAGEMENT_CLIENT_ID,
    clientSecret: process.env.KINDE_MANAGEMENT_CLIENT_SECRET,
    domain: process.env.KINDE_DOMAIN,
    callbackUri: "http://localhost:4321/api/kinde/callback",
    signedInUri: "http://localhost:4321",
    signedOutUri: "http://localhost:4321",
});

You can set the uris based on your NODE_ENV to handle development and production environments.

Usage

The integration automatically injects the following routes:

• /api/kinde/login: Redirects to the Kinde login page
• /api/kinde/register: Redirects to the Kinde registration page
• /api/kinde/callback: Handles the OAuth callback
• /api/kinde/signout: Handles user sign-out
• /api/kinde/isAuthenticated: Checks if the user is authenticated
• /api/kinde/getUser: Retrieves the authenticated user's profile

You can use these routes in your Astro pages to handle authentication. The main ones you will need are login/register/signout.

Authenticating Astro Pages is simple:

---
const isAuthenticated = Astro.locals.isAuthenticated;
---

{isAuthenticated ? (
    <a href="/api/kinde/signout">Sign Out</a>
) : (
    <a href="/api/kinde/login">Login</a>
  <a href="/api/kinde/register">Register</a>
)}

Management SDK

Kinde provides a Management SDK that you can use to manage your users and applications. To use the Management SDK:

1. If using seperately - remember to store the env variables from the previous steps.

2. Install the SDK:

npm install @kinde-oss/kinde-management-api-js

3. Initialise the SDK in astro.config.mts:

import { init } from "@kinde/management-api-js";

// Run the Kinde initialisation
init();

4. Use the SDK in your Astro pages:

---
import { Oauth, OpenAPI } from "@kinde/management-api-js";

const isAuthenticated = Astro.locals.isAuthenticated;
const accessToken = Astro.locals.accessToken;

if (isAuthenticated) {
  OpenAPI.TOKEN = accessToken;
  const userProfile = await Oauth.getUserProfileV2();
  console.log(userProfile);
}
---

That's it! You now have Kinde authentication set up in your Astro project and can use the Management SDK to manage your users and applications.