Use getClaims in the middleware for faster requests (#305)

* chore(version): bump version to 2.12.1 and update auth middleware to use getClaims instead of getUser

- Incremented version in package.json from 2.12.0 to 2.12.1.
- Refactored middleware to replace supabase.auth.getUser() with supabase.auth.getClaims() for improved claims handling.
- Updated user checks in middleware to validate claims instead of user object.

* refactor(middleware): update user authentication to utilize getClaims for improved claims validation

- Replaced calls to supabase.auth.getUser() with supabase.auth.getClaims() in middleware for better claims handling.
- Adjusted user validation checks to ensure claims are used instead of the user object, enhancing security and consistency in authentication flow.

* refactor(auth): update VerifyPage to use getClaims for user validation

- Replaced the use of supabase.auth.getUser() with supabase.auth.getClaims() in the VerifyPage component for improved claims handling.
- Adjusted user validation logic to check for claims instead of the user object, enhancing security and consistency in the authentication flow.

apps/web/app/auth/verify/page.tsx

@@ -25,11 +25,9 @@ export const generateMetadata = async () => {
 async function VerifyPage(props: Props) {
   const client = getSupabaseServerClient();
 
-  const {
-    data: { user },
-  } = await client.auth.getUser();
+  const { data } = await client.auth.getClaims();
 
-  if (!user) {
+  if (!data?.claims) {
     redirect(pathsConfig.auth.signIn);
   }
 
@@ -44,7 +42,7 @@ async function VerifyPage(props: Props) {
 
   return (
     <MultiFactorChallengeContainer
-      userId={user.id}
+      userId={data.claims.sub}
       paths={{
         redirectPath,
       }}

apps/web/middleware.ts

@@ -20,7 +20,7 @@ export const config = {
 const getUser = (request: NextRequest, response: NextResponse) => {
   const supabase = createMiddlewareClient(request, response);
 
-  return supabase.auth.getUser();
+  return supabase.auth.getClaims();
 };
 
 export async function middleware(request: NextRequest) {
@@ -104,14 +104,11 @@ async function adminMiddleware(request: NextRequest, response: NextResponse) {
     return;
   }
 
-  const {
-    data: { user },
-    error,
-  } = await getUser(request, response);
+  const { data, error } = await getUser(request, response);
 
   // If user is not logged in, redirect to sign in page.
   // This should never happen, but just in case.
-  if (!user || error) {
+  if (!data?.claims || error) {
     return NextResponse.redirect(
       new URL(pathsConfig.auth.signIn, request.nextUrl.origin).href,
     );
@@ -141,12 +138,10 @@ function getPatterns() {
     {
       pattern: new URLPattern({ pathname: '/auth/*?' }),
       handler: async (req: NextRequest, res: NextResponse) => {
-        const {
-          data: { user },
-        } = await getUser(req, res);
+        const { data } = await getUser(req, res);
 
         // the user is logged out, so we don't need to do anything
-        if (!user) {
+        if (!data?.claims) {
           return;
         }
 
@@ -168,15 +163,13 @@ function getPatterns() {
     {
       pattern: new URLPattern({ pathname: '/home/*?' }),
       handler: async (req: NextRequest, res: NextResponse) => {
-        const {
-          data: { user },
-        } = await getUser(req, res);
+        const { data } = await getUser(req, res);
 
         const origin = req.nextUrl.origin;
         const next = req.nextUrl.pathname;
 
         // If user is not logged in, redirect to sign in page.
-        if (!user) {
+        if (!data?.claims) {
           const signIn = pathsConfig.auth.signIn;
           const redirectPath = `${signIn}?next=${next}`;
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-supabase-saas-kit-turbo",
-  "version": "2.12.0",
+  "version": "2.12.1",
   "private": true,
   "sideEffects": false,
   "engines": {