chore: Upgrades nextjs to 12.2.X (#227)

* chore: Upgrades nextjs to 12.2.X, updates middlware usage and examples, updates cookie setters * fix: re-add authGuard * fix: change redirectTo * fix: remove yarn.lock files * fix: removes svelte pkg bump, as there were no changes * fix: remove formatting changes * chore: pnpm changeset Co-authored-by: thorwebdev <thor@supabase.io>
supabase · Sep 15, 2022 · 63b1da0 · 63b1da0
1 parent 3a3adc5
commit 63b1da0
Show file tree

Hide file tree

Showing 12 changed files with 331 additions and 110 deletions.
diff --git a/.changeset/loud-planets-brake.md b/.changeset/loud-planets-brake.md
@@ -0,0 +1,6 @@
+---
+'@supabase/auth-helpers-nextjs': patch
+'@supabase/auth-helpers-shared': patch
+---
+
+chore: Upgrades nextjs to 12.2.X
diff --git a/...pages/middleware-protected/_middleware.ts → examples/nextjs/middleware.ts b/...pages/middleware-protected/_middleware.ts → examples/nextjs/middleware.ts
@@ -1,4 +1,4 @@
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/dist/middleware';
+import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs';
 
 export const middleware = withMiddlewareAuth({
   redirectTo: '/login',
@@ -7,3 +7,7 @@ export const middleware = withMiddlewareAuth({
     redirectTo: '/insufficient-permissions'
   }
 });
+
+export const config = {
+  matcher: ['/middleware-protected/:path*']
+};
diff --git a/examples/nextjs/package.json b/examples/nextjs/package.json
@@ -13,7 +13,7 @@
     "@supabase/auth-helpers-nextjs": "workspace:*",
     "@supabase/auth-helpers-react": "workspace:*",
     "@supabase/ui": "^0.36.5",
-    "next": "^12.1.5",
+    "next": "^12.2.5",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },

diff --git a/packages/nextjs/README.md b/packages/nextjs/README.md
@@ -14,6 +14,7 @@ npm install @supabase/auth-helpers-react
 ```
 
 Using [yarn](https://yarnpkg.com/):
+
 ```sh
 yarn add @supabase/auth-helpers-nextjs
 
@@ -272,29 +273,36 @@ If you visit `/api/protected-route` without a valid session cookie, you will get
 
 ## Protecting routes with [Nextjs Middleware](https://nextjs.org/docs/middleware)
 
-As an alternative to protecting individual pages using `getServerSideProps` with `withPageAuth`, `withMiddlewareAuth` can be used from inside a `_middleware` file to protect an entire directory. In the following example, all requests to `/protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected to `/login` (defaults to: `/`) with a 307 Temporary Redirect response status:
+As an alternative to protecting individual pages using `getServerSideProps` with `withPageAuth`, `withMiddlewareAuth` can be used from inside a `middleware` file to protect the entire directory or those that match the config object. In the following example, all requests to `/middleware-protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected to `/login` (defaults to: `/`) with a 307 Temporary Redirect response status:
 
 ```ts
-// pages/protected/_middleware.ts
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/middleware';
+// /middleware.ts
+import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs';
 
-export const middleware = withMiddlewareAuth({ redirectTo: '/login' });
+export const middleware = withMiddlewareAuth({ redirectTo: '/' });
+
+export const config = {
+  matcher: ['/middleware-protected/:path*']
+};
 ```
 
 It is also possible to add finer granularity based on the user logged in. I.e. you can specify a promise to determine if a specific user has permission or not.
 
-
 ```ts
-// pages/protected/_middleware.ts
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/dist/middleware';
+// middlware.ts
+import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/middleware';
 
-export const middleware = withMiddlewareAuth({ 
+export const middleware = withMiddlewareAuth({
   redirectTo: '/login',
   authGuard: {
     isPermitted: async (user) => user.email?.endsWith('@example.com') ?? false,
     redirectTo: '/insufficient-permissions'
   }
 });
+
+export const config = {
+  matcher: ['/middleware-protected/:path*']
+};
 ```
 
 ## Migrating from @supabase/supabase-auth-helpers to @supabase/auth-helpers

diff --git a/packages/nextjs/package.json b/packages/nextjs/package.json
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@supabase/supabase-js": "^1.35.3",
     "config": "workspace:*",
-    "next": "^12.1.5",
+    "next": "^12.2.5",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "rimraf": "^3.0.2",

diff --git a/packages/nextjs/src/constants.ts b/packages/nextjs/src/constants.ts
@@ -1,2 +1,2 @@
-export const PKG_NAME = "@supabase/auth-helpers-nextjs";
-export const PKG_VERSION = "0.2.6";
+export const PKG_NAME = '@supabase/auth-helpers-nextjs';
+export const PKG_VERSION = '0.2.8';
diff --git a/packages/nextjs/src/index.ts b/packages/nextjs/src/index.ts
@@ -3,6 +3,7 @@ export type { User } from '@supabase/supabase-js';
 
 // Methods
 export * from './handlers';
+export * from './middleware';
 export { default as getUser } from './utils/getUser';
 export { getProviderToken } from './utils/getProviderToken';
 export { default as withPageAuth } from './utils/withPageAuth';

diff --git a/packages/nextjs/src/middleware/withMiddlewareAuth.ts b/packages/nextjs/src/middleware/withMiddlewareAuth.ts
@@ -15,7 +15,9 @@ class NoPermissionError extends Error {
   constructor(message: string) {
     super(message);
   }
-  get name() { return this.constructor.name }
+  get name() {
+    return this.constructor.name;
+  }
 }
 
 export interface withMiddlewareAuthOptions {
@@ -56,8 +58,12 @@ export const withMiddlewareAuth: withMiddlewareAuth =
       const cookieOptions = { ...COOKIE_OPTIONS, ...options.cookieOptions };
       const tokenRefreshMargin =
         options.tokenRefreshMargin ?? TOKEN_REFRESH_MARGIN;
-      const access_token = req.cookies[`${cookieOptions.name!}-access-token`];
-      const refresh_token = req.cookies[`${cookieOptions.name!}-refresh-token`];
+      const access_token = req.cookies.get(
+        `${cookieOptions.name!}-access-token`
+      );
+      const refresh_token = req.cookies.get(
+        `${cookieOptions.name!}-refresh-token`
+      );
 
       const res = NextResponse.next();
 

diff --git a/packages/nextjs/src/utils/supabaseServerClient.ts b/packages/nextjs/src/utils/supabaseServerClient.ts
@@ -38,6 +38,7 @@ export default function supabaseServerClient(
   }
   const access_token =
     context.req.cookies[`${cookieOptions.name}-access-token`];
-  supabaseClient.auth.setAuth(access_token);
+
+  if (access_token) supabaseClient.auth.setAuth(access_token);
   return supabaseClient;
 }
diff --git a/packages/shared/package.json b/packages/shared/package.json
@@ -31,7 +31,7 @@
   "homepage": "https://github.com/supabase/auth-helpers#readme",
   "devDependencies": {
     "@supabase/supabase-js": "^1.35.3",
-    "next": "^12.1.5",
+    "next": "^12.2.5",
     "react": ">=17.0.2 <18.0.0 || >=18.0.0-0 <19.0.0",
     "react-dom": "^17.0.2 || ^18.0.0-0",
     "tsconfig": "workspace:*",

diff --git a/packages/shared/src/adapters/NextMiddlewareAdapter.ts b/packages/shared/src/adapters/NextMiddlewareAdapter.ts
@@ -8,7 +8,7 @@ export class NextRequestAdapter implements RequestAdapter {
   }
 
   setRequestCookie(name: string, value: string) {
-    this.req.cookies[name] = value;
+    this.req.cookies.set(name, value);
   }
 
   getHeader(name: string) {