Step-by-Step

This guide is an add-on to the step-by-step guide for setting up Blueprint Auth. If you haven't set up Blueprint Auth yet, follow that guide first before proceeding. These additional steps will help you integrate Kraken OAuth into your Next.js application.

Step 1: Create API Routes and Add Middleware for OAuth

Set up the necessary API routes to handle the OAuth flow and integrate the authMiddleware into your Next.js middleware.ts file.

pages/api/auth/kraken-oauth.ts

import type { NextApiRequest, NextApiResponse } from 'next';
import { krakenOAuthHandler } from '@krakentech/blueprint-auth';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    await krakenOAuthHandler({
        req,
        res,
        krakenConfig: {
            authEndpoint: process.env.KRAKEN_AUTH_ENDPOINT as string,
            oauthClientId: process.env.KRAKEN_OAUTH_CLIENT_ID as string,
        },
        appRoutes: {
            login: '/login',
            dashboard: '/dashboard',
        },
    });
}

pages/api/graphql.ts

You will need to add the authEndpoint and oauthClientId properties to your graphqlHandler's krakenConfig object.

import type { NextApiRequest, NextApiResponse } from 'next';
import { graphqlHandler } from '@krakentech/blueprint-auth';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
    await graphqlHandler({
        req,
        res,
        krakenConfig: {
+            authEndpoint: process.env.KRAKEN_AUTH_ENDPOINT as string,
+            oauthClientId: process.env.KRAKEN_OAUTH_CLIENT_ID as string,
        },
    });
}

middleware.ts

import { NextResponse, type NextRequest } from 'next/server';
import { authMiddleware } from '@krakentech/blueprint-auth';

export async function middleware(req: NextRequest) {
    const res = NextResponse.next();

    return await authMiddleware({
        req,
        res,
        krakenConfig: {
            graphqlEndpoint,
+           authEndpoint: process.env.KRAKEN_AUTH_ENDPOINT as string,
+           oauthClientId: process.env.KRAKEN_OAUTH_CLIENT_ID as string,
        },
        appRoutes: {
            login: '/login',
            dashboard: '/dashboard',
        },
    });
}

Step 2: Create a "Log in with Kraken" Button

Implement a button to initiate the OAuth flow using the createKrakenOAuthURI helper:

components/LoginButton.tsx

import { createKrakenOAuthURI } from '@krakentech/blueprint-auth';

const LoginButton = ({ authorizeURI }: { authorizeURI: string }) => {
    return <button onClick={() => window.open(authorizeURI, '_blank')}>Log in with Kraken Auth</button>;
};

export const getServerSideProps = async (
    context: GetServerSidePropsContext
) => {
    const { req, res } = context;
    const authorizeURI = await createKrakenOAuthURI({
        req,
        res,
        krakenConfig: {
            authEndpoint: process.env.KRAKEN_AUTH_ENDPOINT as string,
            oauthClientId: process.env.KRAKEN_OAUTH_CLIENT_ID as string,
        },
        krakenOAuthApiRoute: '/api/auth/kraken-oauth',
    });

    return {
        props: {
            authorizeURI,
        },
    };
};

export default LoginButton;

API reference

By following these additional steps, you will successfully integrate OAuth with Kraken in your Next.js application.