During the Next.js setup you could pick between two routers, the App Router and the Pages Router.
Ensure you add the correct code and follow the correct directory structure for Router that you picked.
To get these elements to work with typescript, currently we must add the types to the project.
To do do this, create a file called custom.d.ts and place it in your apps root / src folder.
Now lets setup the HankoAuth.tsx file to create a functioning login page.
Here we subscribe to the onSessionCreatedevent, this triggers when a user successfully logs in. You can use these event to perform any desired action. (e.g. redirect to your dashboard).
After setting up the HankoAuth let’s set up the HankoProfile.jsx file to create an interface where users can
manage their Email Addresses and credentials.
To verify the session token in your Next.js application, we’re using the session/validate API request. By checking for a valid session token this middleware will ensure secure access to specific routes, like /dashboard and /protected.
The middleware extracts and verifies the session token, and redirect unauthorized users back to the home or login page.
For more info on middlewares and where to put the middleware.ts file,
please refer to NextJS Middleware.
Middleware tends to not always work after creating it, if this is the case try restarting your next app.
middleware.ts
Copy
Ask AI
import { NextResponse, NextRequest } from "next/server";const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;export async function middleware(req: NextRequest) {const token = req.cookies.get("hanko")?.value; const validationOptions = { method: 'POST', headers: {'Content-Type': 'application/json'}, body: `{"session_token":"${token}"}` } try { const validationResponse = await fetch( new URL(`${hankoApi}/sessions/validate`),//Hanko session validation validationOptions ); if (!validationResponse.ok) { throw new Error('Session validation failed'); } const responseData = await validationResponse.json(); if(!responseData.is_valid){ throw new Error('Session token not valid'); } } catch (error) { console.log(error) return NextResponse.redirect(new URL("/", req.url));// URL to redirect the user to }}export const config = { matcher: ["/dashboard"],};
To verify that it works, logout on your app and go to /dashboard, you should get redirected back.
During the Next.js setup you could pick between two routers, the App Router and the Pages Router.
Ensure you add the correct code and follow the correct directory structure for Router that you picked.
To get these elements to work with typescript, currently we must add the types to the project.
To do do this, create a file called custom.d.ts and place it in your apps root / src folder.
Now lets setup the HankoAuth.tsx file to create a functioning login page.
Here we subscribe to the onSessionCreatedevent, this triggers when a user successfully logs in. You can use these event to perform any desired action. (e.g. redirect to your dashboard).
After setting up the HankoAuth let’s set up the HankoProfile.jsx file to create an interface where users can
manage their Email Addresses and credentials.
To verify the session token in your Next.js application, we’re using the session/validate API request. By checking for a valid session token this middleware will ensure secure access to specific routes, like /dashboard and /protected.
The middleware extracts and verifies the session token, and redirect unauthorized users back to the home or login page.
For more info on middlewares and where to put the middleware.ts file,
please refer to NextJS Middleware.
Middleware tends to not always work after creating it, if this is the case try restarting your next app.
middleware.ts
Copy
Ask AI
import { NextResponse, NextRequest } from "next/server";const hankoApi = process.env.NEXT_PUBLIC_HANKO_API_URL;export async function middleware(req: NextRequest) {const token = req.cookies.get("hanko")?.value; const validationOptions = { method: 'POST', headers: {'Content-Type': 'application/json'}, body: `{"session_token":"${token}"}` } try { const validationResponse = await fetch( new URL(`${hankoApi}/sessions/validate`),//Hanko session validation validationOptions ); if (!validationResponse.ok) { throw new Error('Session validation failed'); } const responseData = await validationResponse.json(); if(!responseData.is_valid){ throw new Error('Session token not valid'); } } catch (error) { console.log(error) return NextResponse.redirect(new URL("/", req.url));// URL to redirect the user to }}export const config = { matcher: ["/dashboard"],};
To verify that it works, logout on your app and go to /dashboard, you should get redirected back.