Merge beta into main (#1314)

auth0 · Jul 25, 2023 · edeb1d0 · edeb1d0
2 parents 33185cd + ce72b71
commit edeb1d0
Show file tree

Hide file tree

Showing 197 changed files with 11,942 additions and 8,688 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -5,20 +5,20 @@ jobs:
   build:
     docker:
       - image: cimg/node:lts-browsers
-    resource_class: xlarge
+    resource_class: 2xlarge
     steps:
       - checkout
       - restore_cache:
-          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "examples/kitchen-sink-example/package.json" }}
+          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "example-app/package.json" }}
       - run: npm ci
       - run:
-          name: npm run install:kitchen-sink
+          name: npm run install:example
           command: |
             if [ -z "$CIRCLE_PR_NUMBER" ]; then
-              npm run install:kitchen-sink
+              npm run install:example
             fi
       - save_cache:
-          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "examples/kitchen-sink-example/package.json" }}
+          key: dependencies-{{ .Branch }}-{{ checksum "package-lock.json" }}-{{ checksum "example-app/package.json" }}
           paths:
             - ~/.npm
             - ~/.cache
@@ -29,7 +29,7 @@ jobs:
           name: browserstack
           command: |
             if [ -z "$CIRCLE_PR_NUMBER" ]; then
-              npx start-server-and-test 'start:kitchen-sink-local' http://localhost:3000 'browserstack-cypress run --build-name $CIRCLE_BRANCH --no-wrap'
+              npx start-server-and-test 'start:example-local' http://localhost:3000 'browserstack-cypress run --build-name $CIRCLE_BRANCH --no-wrap'
             fi
       - store_test_results:
           path: test-results
@@ -44,6 +44,7 @@ workflows:
           context:
             - browserstack-env
       - ship/node-publish:
+          publish-command: npm publish --tag beta
           requires:
             - build
           context:
@@ -52,4 +53,4 @@ workflows:
           filters:
             branches:
               only:
-                - main
+                - beta
diff --git a/.gitignore b/.gitignore
@@ -73,3 +73,6 @@ dist/
 
 # Mac OSX files
 .DS_Store
+
+# IDE
+.idea
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,18 +9,47 @@
 **Fixed**
 - Clean up erroneous cookies when chunk size decreases [\#1300](https://github.com/auth0/nextjs-auth0/pull/1300) ([adamjmcgrath](https://github.com/adamjmcgrath))
 
+## [v3.0.0-beta.3](https://github.com/auth0/nextjs-auth0/tree/v3.0.0-beta.3) (2023-06-28)
+[Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v3.0.0-beta.2...v3.0.0-beta.3)
+
+**Added**
+- [SDK-4319] Add support for Edge runtime [\#1269](https://github.com/auth0/nextjs-auth0/pull/1269) ([adamjmcgrath](https://github.com/adamjmcgrath))
+- [SDK-4318] Enable responses from custom middleware [\#1265](https://github.com/auth0/nextjs-auth0/pull/1265) ([adamjmcgrath](https://github.com/adamjmcgrath))
+
 ## [v2.6.3](https://github.com/auth0/nextjs-auth0/tree/v2.6.3) (2023-06-26)
 [Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v2.6.2...v2.6.3)
 
 **Fixed**
 - Fix for setting custom cookies in `withMiddlewareAuthRequired` [\#1263](https://github.com/auth0/nextjs-auth0/pull/1263) ([adamjmcgrath](https://github.com/adamjmcgrath))
 
+
+## [v3.0.0-beta.2](https://github.com/auth0/nextjs-auth0/tree/v3.0.0-beta.2) (2023-06-16)
+[Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v3.0.0-beta.1...v3.0.0-beta.2)
+
+**Fixed**
+- Fix issue where api wrapper was overwriting session update in api [\#1255](https://github.com/auth0/nextjs-auth0/pull/1255) ([adamjmcgrath](https://github.com/adamjmcgrath))
+
+## [v3.0.0-beta.1](https://github.com/auth0/nextjs-auth0/tree/v3.0.0-beta.1) (2023-06-13)
+[Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v3.0.0-beta.0...v3.0.0-beta.1)
+
+**Fixed**
+- Fix request check in node 16 [\#1250](https://github.com/auth0/nextjs-auth0/pull/1250) ([adamjmcgrath](https://github.com/adamjmcgrath))
+
 ## [v2.6.2](https://github.com/auth0/nextjs-auth0/tree/v2.6.2) (2023-06-09)
 [Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v2.6.1...v2.6.2)
 
 **Fixed**
 - Fix for handling chunked cookies in edge runtime [\#1236](https://github.com/auth0/nextjs-auth0/pull/1236) ([adamjmcgrath](https://github.com/adamjmcgrath))
 
+## [v3.0.0-beta.0](https://github.com/auth0/nextjs-auth0/tree/v3.0.0-beta.0) (2023-06-08)
+[Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v2.6.1...v3.0.0-beta.0)
+
+**Added**
+- Support for the App Router.
+
+**⚠️ BREAKING CHANGES**
+- Support for EOL Node versions 12 and 14 has been removed. See the [V3_MIGRATION_GUIDE.md](./V3_MIGRATION_GUIDE.md) for more details.
+
 ## [v2.6.1](https://github.com/auth0/nextjs-auth0/tree/v2.6.1) (2023-06-06)
 [Full Changelog](https://github.com/auth0/nextjs-auth0/compare/v2.6.0...v2.6.1)
 

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -15,27 +15,14 @@ Please read [Auth0's contribution guidelines](https://github.com/auth0/open-sour
 - `npm run build:test`: Do this once to build the test harness for the tests
 - `npm test`: Run the unit tests
 - `npm run test:watch`: Run the unit tests and watch for changes
-- `npm run install:examples`: Install the examples
-- Setup the examples https://github.com/auth0/nextjs-auth0/tree/main/examples
-- `npm run start:basic`: Run the basic example
-- `npm run start:kitchen-sink`: Run the kitchen sink example
-- `npm run test:kitchen-sink`: Run the E2E tests (you will need to populate the `CYPRESS_USER_EMAIL` and `CYPRESS_USER_PASSWORD` env vars)
-- `npm run test:kitchen-sink:watch`: Run the E2E tests and watch for changes
+- `npm run install:example`: Install the examples
+- Setup the examples https://github.com/auth0/nextjs-auth0/tree/main/example-app
+- `npm run start:example`: Run the example
+- `npm run test:example`: Run the E2E tests (you will need to populate the `CYPRESS_USER_EMAIL` and `CYPRESS_USER_PASSWORD` env vars)
+- `npm run test:example:watch`: Run the E2E tests and watch for changes
 
 ## Running examples against a mock openid provider
 
-Your env vars in `/examples/kitchen-sink-example/.env.local` should look like
-
-```bash
-AUTH0_SECRET=#ANY LONG RANDOM VALUE
-AUTH0_ISSUER_BASE_URL=http://localhost:3000/oidc
-AUTH0_BASE_URL=http://localhost:3000
-AUTH0_CLIENT_ID=testing
-AUTH0_CLIENT_SECRET=testing
-```
-
-Then run one of the commands:
-
-- `start:kitchen-sink-local`: "npm run dev:local --prefix=examples/kitchen-sink-example",
-- `test:kitchen-sink-local`: Run the E2E tests against a mock openid provider
-- `test:kitchen-sink-local:watch`: Run the E2E tests against a mock openid provider and watch for changes
+- `start:example-local`: Run the example app with a mock openid provider
+- `test:example-local`: Run the E2E tests with a mock openid provider
+- `test:example-local:watch`: Run the E2E tests with a mock openid provider and watch for changes
diff --git a/EXAMPLES.md b/EXAMPLES.md
@@ -1,6 +1,5 @@
 # Examples
 
-- [Basic Setup](#basic-setup)
 - [Create your own instance of the SDK](#create-your-own-instance-of-the-sdk)
 - [Customize handlers behavior](#customize-handlers-behavior)
 - [Use custom auth urls](#use-custom-auth-urls)
@@ -13,76 +12,9 @@
 - [Use with Base Path and Internationalized Routing](#use-with-base-path-and-internationalized-routing)
 - [Use a custom session store](#use-a-custom-session-store)
 
-All examples can be seen running in the [Kitchen Sink example app](./examples/kitchen-sink-example).
+See also the [example app](./example-app).
 
-## Basic Setup
-
-Configure the required options in an `.env.local` file in the root of your application:
-
-```sh
-AUTH0_SECRET='LONG_RANDOM_VALUE'
-AUTH0_BASE_URL='http://localhost:3000'
-AUTH0_ISSUER_BASE_URL='https://your-tenant.auth0.com'
-AUTH0_CLIENT_ID='CLIENT_ID'
-AUTH0_CLIENT_SECRET='CLIENT_SECRET'
-```
-
-Create a [dynamic API route handler](https://nextjs.org/docs/api-routes/dynamic-api-routes) at `/pages/api/auth/[auth0].js`.
-
-```js
-import { handleAuth } from '@auth0/nextjs-auth0';
-
-export default handleAuth();
-```
-
-This will create the following urls: `/api/auth/login`, `/api/auth/callback`, `/api/auth/logout` and `/api/auth/me`.
-
-Wrap your `pages/_app.jsx` component in the `UserProvider` component.
-
-```jsx
-// pages/_app.jsx
-import React from 'react';
-import { UserProvider } from '@auth0/nextjs-auth0/client';
-
-export default function App({ Component, pageProps }) {
-  // You can optionally pass the `user` prop from pages that require server-side
-  // rendering to prepopulate the `useUser` hook.
-  const { user } = pageProps;
-
-  return (
-    <UserProvider user={user}>
-      <Component {...pageProps} />
-    </UserProvider>
-  );
-}
-```
-
-Check the user's authentication state and log them in or out from the front end using the `useUser` hook.
-
-```jsx
-// pages/index.jsx
-import { useUser } from '@auth0/nextjs-auth0/client';
-
-export default () => {
-  const { user, error, isLoading } = useUser();
-
-  if (isLoading) return <div>Loading...</div>;
-  if (error) return <div>{error.message}</div>;
-
-  if (user) {
-    return (
-      <div>
-        Welcome {user.name}! <a href="/api/auth/logout">Logout</a>
-      </div>
-    );
-  }
-  return <a href="/api/auth/login">Login</a>;
-};
-```
-
-Have a look at the `basic-example` app [./examples/basic-example](./examples/basic-example).
-
-## Create your own instance of the SDK
+### Create your own instance of the SDK
 
 When you use the named exports, the SDK creates an instance of the SDK for you and configures it with the provided environment variables.
 
@@ -155,7 +87,7 @@ export default auth0.handleAuth({
 });
 ```
 
-## Customize handlers behavior
+### Customize handlers behavior
 
 Pass custom parameters to the auth handlers or add your own logging and error handling.
 
@@ -191,7 +123,7 @@ export default handleAuth({
 });
 ```
 
-## Use custom auth urls
+### Use custom auth urls
 
 Instead of (or in addition to) creating `/pages/api/auth/[auth0].js` to handle all requests, you can create them individually at different urls.
 
@@ -217,7 +149,9 @@ export default () => <a href="/api/custom-login">Login</a>;
 
 > Note: If you customize the login url you will need to set the environment variable `NEXT_PUBLIC_AUTH0_LOGIN` to this custom value for `withPageAuthRequired` to work correctly. And if you customize the profile url, you will need to set the `NEXT_PUBLIC_AUTH0_PROFILE` environment variable to this custom value for the `useUser` hook to work properly.
 
-## Protecting a Server-Side Rendered (SSR) Page
+### Protecting a Server-Side Rendered (SSR) Page
+
+#### Page Router
 
 Requests to `/pages/profile` without a valid session cookie will be redirected to the login page.
 
@@ -234,9 +168,25 @@ export default function Profile({ user }) {
 export const getServerSideProps = withPageAuthRequired();
 ```
 
-See a running example of an [SSR protected page](./examples/kitchen-sink-example/pages/profile-ssr.tsx) in the kitchen-sink example app or refer to the full list of configuration options for `withPageAuthRequired` [here](https://auth0.github.io/nextjs-auth0/modules/helpers_with_page_auth_required.html#withpageauthrequiredoptions).
+See a running example of an [SSR protected page](./example-app/pages/page-router/profile-ssr.tsx) in the example app or refer to the full list of configuration options for `withPageAuthRequired` [here](https://auth0.github.io/nextjs-auth0/modules/helpers_with_page_auth_required.html#withpageauthrequiredoptions).
 
-## Protecting a Client-Side Rendered (CSR) Page
+#### App Router
+
+Requests to `/pages/profile` without a valid session cookie will be redirected to the login page.
+
+```jsx
+// app/profile/page.js
+import { withPageAuthRequired } from '@auth0/nextjs-auth0';
+
+export default withPageAuthRequired(function Profile({ user }) {
+  return <div>Hello {user.name}</div>;
+}, { returnTo: '/profile' })
+// You need to provide a `returnTo` since Server Components aren't aware of the page's URL
+```
+
+See a running example of a [protected server component page](./example-app/app/profile/page.tsx) in the example app or more info [in the docs](./src/helpers/with-page-auth-required.ts#129).
+
+### Protecting a Client-Side Rendered (CSR) Page
 
 Requests to `/pages/profile` without a valid session cookie will be redirected to the login page.
 
@@ -249,11 +199,13 @@ export default withPageAuthRequired(function Profile({ user }) {
 });
 ```
 
-See a running example of a [CSR protected page](./examples/kitchen-sink-example/pages/profile.tsx) in the kitchen-sink example app.
+See a running example of a [CSR protected page](./example-app/pages/profile.tsx) in the example app.
+
+### Protect an API Route
 
-## Protect an API Route
+#### Page Router
 
-Requests to `/pages/api/protected` without a valid session cookie will fail with `401`.
+Requests to `/api/protected` without a valid session cookie will fail with `401`.
 
 ```js
 // pages/api/protected.js
@@ -285,10 +237,49 @@ export default withPageAuthRequired(function Products() {
 });
 ```
 
-See a running example in the kitchen-sink example app, the [protected API route](./examples/kitchen-sink-example/pages/api/shows.ts) and
-the [frontend code to access the protected API](./examples/kitchen-sink-example/pages/shows.tsx).
+See a running example in the example app, the [protected API route](./example-app/pages/api/page-router-profile.ts) and
+the [frontend code to access the protected API](./example-app/pages/page-router/profile-api.tsx).
+
+#### App Router
 
-## Protecting pages with Middleware
+Requests to `/api/protected` without a valid session cookie will fail with `401`.
+
+```js
+// app/api/protected/route.js
+import { withApiAuthRequired, getSession } from '@auth0/nextjs-auth0';
+
+export default withApiAuthRequired(async function myApiRoute(req) {
+  const res = new NextResponse();
+  const { user } = await getSession(req, res);
+  return NextResponse.json({ protected: 'My Secret', id: user.sub }, res);
+});
+```
+
+Then you can access your API from the frontend with a valid session cookie.
+
+```jsx
+// app/products/page.jsx
+'use client'
+import useSWR from 'swr';
+import { withPageAuthRequired } from '@auth0/nextjs-auth0/client';
+
+const fetcher = async (uri) => {
+  const response = await fetch(uri);
+  return response.json();
+};
+
+export default withPageAuthRequired(function Products() {
+  const { data, error } = useSWR('/api/protected', fetcher);
+  if (error) return <div>oops... {error.message}</div>;
+  if (data === undefined) return <div>Loading...</div>;
+  return <div>{data.protected}</div>;
+});
+```
+
+See a running example in the example app, the [protected API route](./example-app/app/api/profile/route.ts) and
+the [frontend code to access the protected API](./example-app/app/profile-api/page.tsx).
+
+### Protecting pages with Middleware
 
 Protect your pages with Next.js Middleware.
 
@@ -348,7 +339,7 @@ export default auth0.withMiddlewareAuthRequired(async function middleware(req) {
 });
 ```
 
-## Access an External API from an API Route
+### Access an External API from an API Route
 
 Get an access token by providing your API's audience and scopes. You can pass them directly to the `handlelogin` method, or use environment variables instead.
 
@@ -390,8 +381,6 @@ export default withApiAuthRequired(async function products(req, res) {
 });
 ```
 
-See a running example of the [API route acting as a proxy to an External API](./examples/kitchen-sink-example/pages/api/shows.ts) in the kitchen-sink example app.
-
 ### Getting a Refresh Token
 
 - Include the `offline_access` scope your configuration (or `AUTH0_SCOPE`)
@@ -419,7 +408,7 @@ Users can then sign up using the signup handler.
 <a href="/api/auth/signup">Sign up</a>
 ```
 
-## Use with Base Path and Internationalized Routing
+### Use with Base Path and Internationalized Routing
 
 With Next.js you can deploy a Next.js application under a sub-path of a domain using [Base Path](https://nextjs.org/docs/api-reference/next.config.js/basepath) and serve internationalized (i18n) routes using [Internationalized Routing](https://nextjs.org/docs/advanced-features/i18n-routing).
 
@@ -470,7 +459,7 @@ export const getServerSideProps = (ctx) => {
 };
 ```
 
-## Use a custom session store
+### Use a custom session store
 
 You need to create your own instance of the SDK in code, so you can pass an instance of your session store to the SDK's configuration.