From e9bcdd7a504a741982e86b280a3e23d3fbf800b5 Mon Sep 17 00:00:00 2001 From: Tamal Anwar Chowdhury Date: Tue, 17 Jun 2025 18:38:17 +0600 Subject: [PATCH 1/5] update the API key location --- src/content/docs/integrate/third-party-tools/kinde-supabase.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx index 1926d2f0b..c3a4ed494 100644 --- a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx +++ b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx @@ -146,7 +146,7 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe 8. Add the following to your `.env.local` file: - The Kinde environment vars details you copied earlier. You can get these again from your Kinde application Quick start page. - - The Supabase Project URL and Anon public key. You can get these from **Supabase > Project Settings > Data API.** + - The Supabase Project URL from **Supabase > Project Settings > Data API.** and Anon public key from **Supabase > API Keys.** ``` KINDE_CLIENT_ID= From 1fd28937f5ad9e9701c21c1555033bd280a9c925 Mon Sep 17 00:00:00 2001 From: Tamal Anwar Chowdhury Date: Tue, 17 Jun 2025 18:42:17 +0600 Subject: [PATCH 2/5] Update code file name and codes in step 3 --- .../third-party-tools/kinde-supabase.mdx | 104 +++++------------- 1 file changed, 29 insertions(+), 75 deletions(-) diff --git a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx index c3a4ed494..cbf9fb17d 100644 --- a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx +++ b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx @@ -159,86 +159,40 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe NEXT_PUBLIC_SUPABASE_ANON_KEY= ``` -9. Open the `components/header-auth.tsx` file and replace the entire content with the following. This code will replace Supabase Auth functions with Kinde Auth. +9. Open the `components/ui/auth-button.tsx` file and replace the entire content with the following. This code will replace Supabase Auth functions with Kinde Auth. - ```sql - import { - RegisterLink, - LoginLink, - LogoutLink, - } from "@kinde-oss/kinde-auth-nextjs/components" - import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server" - - import { signOutAction } from "@/app/actions" - import { hasEnvVars } from "@/utils/supabase/check-env-vars" - import { Badge } from "./ui/badge" - import { Button } from "./ui/button" - - export default async function AuthButton() { - const { getUser } = getKindeServerSession() - const user = await getUser() - - if (!hasEnvVars) { - return ( - <> -
-
- - Please update .env.local file with anon key and url - -
-
- - -
-
- + ```tsx + import { + RegisterLink, + LoginLink, + LogoutLink, + } from "@kinde-oss/kinde-auth-nextjs/components" + import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server" + + import { Button } from "./ui/button" + + export async function AuthButton() { + const { getUser } = getKindeServerSession() + const user = await getUser() + + return user ? ( +
+ Hey, {user.email}!Log out +
+ ) : ( +
+ + +
) } - return user ? ( -
- Hey, {user.given_name}! -
- -
-
- ) : ( -
- - -
- ) - } ``` -10. Replace `utils/supabase/server.ts` with the following code: +10. Replace `lib/supabase/server.ts` with the following code: ```tsx import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server" From aaa93332f6cfaaee7efe164f28ee17ab842a6040 Mon Sep 17 00:00:00 2001 From: Tamal Anwar Chowdhury Date: Tue, 17 Jun 2025 18:48:55 +0600 Subject: [PATCH 3/5] Update the page url and code --- .../third-party-tools/kinde-supabase.mdx | 139 +++++++++--------- 1 file changed, 66 insertions(+), 73 deletions(-) diff --git a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx index cbf9fb17d..e26a67193 100644 --- a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx +++ b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx @@ -159,7 +159,7 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe NEXT_PUBLIC_SUPABASE_ANON_KEY= ``` -9. Open the `components/ui/auth-button.tsx` file and replace the entire content with the following. This code will replace Supabase Auth functions with Kinde Auth. +9. Open the `components/auth-button.tsx` file and replace the entire content with the following. This code will replace Supabase Auth functions with Kinde Auth. ```tsx import { @@ -253,90 +253,83 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe ## Step 4: Build a simple to-do app -1. In your project directory, on a new terminal window, create a `todo` directory with a `page.tsx` file inside it by running the following command. This file will serve as your to-do page. - - ```jsx - mkdir app/todo - touch app/todo/page.tsx - ``` - -2. Add the following code to `page.tsx` which is a basic to-do list table: +1. Open the `/components/hero.tsx` with your favorite code editor. + +2. Add the following code to `hero.tsx` which is a basic to-do list table: ```tsx - import { createClient } from "@/utils/supabase/server" - - export default async function TodoList() { - const supabase = await createClient() - const { data: todos } = await supabase.from("todos").select() - - return ( -
- - - - - - + import { createClient } from "@/lib/supabase/server" + + export async function Hero() { + const supabase = await createClient() + const { data: todos } = await supabase.from("todos").select() + + return ( +
+
- ID - - Task - - Is Complete -
+ + + + + + + + + {todos?.map((row) => ( + + + + - - - {todos?.map((row) => ( - - - - - - ))} - -
+ ID + + Task + + Is Complete +
+ {row.id} + + {row.task} + + {String(row.completed_state)} +
- {row.id} - - {row.task} - - {String(row.completed_state)} -
-
- ) + ))} + + + + ) } ``` -3. Go to http://localhost:3000/todo to preview the page. You won’t see any to-do items because we haven’t set any permissions yet. +3. Go to http://localhost:3000 to preview the page. You won’t see any to-do items because we haven’t set any permissions yet. ![Empty to-do list](https://imagedelivery.net/skPPZTHzSlcslvHjesZQcQ/c71da76d-f54a-4d2e-9636-bb063b120800/public) 4. To ensure the user is redirected to the **to-do page** after they sign in, update the `KINDE_POST_LOGIN_REDIRECT_URL` in your `.env.local` file to: ```yaml - KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000/todo + KINDE_POST_LOGIN_REDIRECT_URL=http://localhost:3000 ``` From 902414f8f79fb87dc6b3e81ec6eb06046db5b15a Mon Sep 17 00:00:00 2001 From: Tamal Anwar Chowdhury Date: Tue, 17 Jun 2025 18:50:32 +0600 Subject: [PATCH 4/5] update the command to fix zshell error --- .../docs/integrate/third-party-tools/kinde-supabase.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx index e26a67193..4d8d1931a 100644 --- a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx +++ b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx @@ -127,8 +127,8 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe 5. Create the Kinde auth endpoint in this path **app/api/auth/[kindeAuth]**: ```bash - mkdir -p app/api/auth/[kindeAuth] - touch app/api/auth/[kindeAuth]/route.js + mkdir -p "app/api/auth/[kindeAuth]" + touch "app/api/auth/[kindeAuth]/route.js" ``` 6. Open the newly created `route.js` file, enter the following code, and save the file: From ff0120eb073af98afed644b2c330dd2e731eb44d Mon Sep 17 00:00:00 2001 From: Tamal Anwar Chowdhury Date: Tue, 17 Jun 2025 19:20:47 +0600 Subject: [PATCH 5/5] update the middleware part from supabase --- .../third-party-tools/kinde-supabase.mdx | 52 ++++++++++++++++--- 1 file changed, 45 insertions(+), 7 deletions(-) diff --git a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx index 4d8d1931a..dfb4be37f 100644 --- a/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx +++ b/src/content/docs/integrate/third-party-tools/kinde-supabase.mdx @@ -162,10 +162,10 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe 9. Open the `components/auth-button.tsx` file and replace the entire content with the following. This code will replace Supabase Auth functions with Kinde Auth. ```tsx - import { - RegisterLink, - LoginLink, - LogoutLink, + import { + RegisterLink, + LoginLink, + LogoutLink, } from "@kinde-oss/kinde-auth-nextjs/components" import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server" @@ -194,7 +194,7 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe 10. Replace `lib/supabase/server.ts` with the following code: - ```tsx + ```ts import { getKindeServerSession } from "@kinde-oss/kinde-auth-nextjs/server" import { createServerClient } from "@supabase/ssr" import { cookies } from "next/headers" @@ -242,14 +242,52 @@ In this guide, we will walk through integrating Kinde and Supabase to build a pe ) } ``` +11. Replace `lib/supabase/middleware.ts` with the following code: + + ```ts + import { NextResponse, type NextRequest } from "next/server" + import { hasEnvVars } from "../utils" + + export async function updateSession(request: NextRequest) { + const supabaseResponse = NextResponse.next({ + request, + }) + + // If the env vars are not set, skip middleware check. You can remove this once you setup the project. + if (!hasEnvVars) { + return supabaseResponse + } + + // Do not run code between createServerClient and + // supabase.auth.getUser(). A simple mistake could make it very hard to debug + // issues with users being randomly logged out. + + // IMPORTANT: DO NOT REMOVE auth.getUser() + + // IMPORTANT: You *must* return the supabaseResponse object as it is. + // If you're creating a new response object with NextResponse.next() make sure to: + // 1. Pass the request in it, like so: + // const myNewResponse = NextResponse.next({ request }) + // 2. Copy over the cookies, like so: + // myNewResponse.cookies.setAll(supabaseResponse.cookies.getAll()) + // 3. Change the myNewResponse object to fit your needs, but avoid changing + // the cookies! + // 4. Finally: + // return myNewResponse + // If this is not done, you may be causing the browser and server to go out + // of sync and terminate the user's session prematurely! + + return supabaseResponse + } + ``` -11. Start the development environment by typing the following in your terminal: +12. Start the development environment by typing the following in your terminal: ``` npm run dev ``` -12. Go to http://localhost:3000 and sign up/sign in to your Kinde application to test the integration. +13. Go to http://localhost:3000 and sign up/sign in to your Kinde application to test the integration. ## Step 4: Build a simple to-do app