From ea8cf9d92ef5c65a2d4a61894606b39e41beee76 Mon Sep 17 00:00:00 2001 From: Mingjie Jiang <13333578+itsmingjie@users.noreply.github.com> Date: Fri, 20 Oct 2023 14:31:42 -0400 Subject: [PATCH 1/3] Fix incorrect instructions for Next.js app router --- .../nextjs/app-directory/setting-up-frontend.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx b/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx index 635a11d76..987a76e89 100644 --- a/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx +++ b/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx @@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm"; -## 1) Create the `app/auth/[[...path]].tsx` page -- Be sure to create the `auth` folder in the `app` folder. -- `[[...path]].tsx` will contain the component for showing SuperTokens UI +## 1) Create the `app/auth/[[...path]]/page.tsx` page +- Be sure to create the `auth/[[...path]]` folder in the `app` folder. +- `page.tsx` will contain the component for showing SuperTokens UI - An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D). ## 2) Create the `Auth` component: -```tsx title="app/auth/[[...path]].tsx" +```tsx title="app/auth/[[...path]]/page.tsx" 'use client'; import { useEffect } from 'react'; From fc8465d5885fdd7b8a15ef4119e5e4e0760df9df Mon Sep 17 00:00:00 2001 From: Mingjie Jiang Date: Fri, 20 Oct 2023 15:34:22 -0400 Subject: [PATCH 2/3] Fix incorrect instructions for Next.js app router API --- .../nextjs/app-directory/setting-up-backend.mdx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx b/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx index 6beea3b80..2d5fd0c70 100644 --- a/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx @@ -15,9 +15,9 @@ import AppInfoForm from "/src/components/appInfoForm" We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`. -## 1) Create the API folder -- Be sure to create the `auth` folder in the `app/api/` folder. -- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`). +## 1) Create the `app/api/auth/[[...path]]/route.ts` route +- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder. +- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`). - An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D). ## 2) Expose the SuperTokens APIs @@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by showNextJSAPIRouteCheckbox > -```tsx title="app/api/auth/[[...path]].ts" +```tsx title="app/api/auth/[[...path]]/route.ts" declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output import { getAppDirRequestHandler } from 'supertokens-node/nextjs'; import { NextRequest, NextResponse } from 'next/server'; // @ts-ignore -import { ensureSuperTokensInit } from '../../../config/backend'; +import { ensureSuperTokensInit } from '../../../../config/backend'; ensureSuperTokensInit(); From 99efd77db644e865bc6f9a2aa8f626d00b22cbcf Mon Sep 17 00:00:00 2001 From: Nemi Shah Date: Mon, 23 Oct 2023 10:27:53 +0530 Subject: [PATCH 3/3] Make changes for all recipes --- .../nextjs/app-directory/setting-up-backend.mdx | 12 ++++++------ .../nextjs/app-directory/setting-up-frontend.mdx | 10 +++++----- .../nextjs/app-directory/setting-up-backend.mdx | 2 +- .../nextjs/app-directory/setting-up-frontend.mdx | 2 +- .../nextjs/app-directory/setting-up-backend.mdx | 12 ++++++------ .../nextjs/app-directory/setting-up-frontend.mdx | 10 +++++----- .../nextjs/app-directory/setting-up-backend.mdx | 12 ++++++------ .../nextjs/app-directory/setting-up-frontend.mdx | 10 +++++----- .../nextjs/app-directory/setting-up-backend.mdx | 12 ++++++------ .../nextjs/app-directory/setting-up-frontend.mdx | 10 +++++----- 10 files changed, 46 insertions(+), 46 deletions(-) diff --git a/v2/emailpassword/nextjs/app-directory/setting-up-backend.mdx b/v2/emailpassword/nextjs/app-directory/setting-up-backend.mdx index 6beea3b80..41439dfbf 100644 --- a/v2/emailpassword/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/emailpassword/nextjs/app-directory/setting-up-backend.mdx @@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm" We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`. -## 1) Create the API folder -- Be sure to create the `auth` folder in the `app/api/` folder. -- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`). -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D). +## 1) Create the `app/api/auth/[[...path]]/route.ts` route +- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder. +- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`). +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts). ## 2) Expose the SuperTokens APIs @@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by showNextJSAPIRouteCheckbox > -```tsx title="app/api/auth/[[...path]].ts" +```tsx title="app/api/auth/[[...path]]/route.ts" declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output import { getAppDirRequestHandler } from 'supertokens-node/nextjs'; import { NextRequest, NextResponse } from 'next/server'; // @ts-ignore -import { ensureSuperTokensInit } from '../../../config/backend'; +import { ensureSuperTokensInit } from '../../../../config/backend'; ensureSuperTokensInit(); diff --git a/v2/emailpassword/nextjs/app-directory/setting-up-frontend.mdx b/v2/emailpassword/nextjs/app-directory/setting-up-frontend.mdx index 635a11d76..7bf80787d 100644 --- a/v2/emailpassword/nextjs/app-directory/setting-up-frontend.mdx +++ b/v2/emailpassword/nextjs/app-directory/setting-up-frontend.mdx @@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm"; -## 1) Create the `app/auth/[[...path]].tsx` page -- Be sure to create the `auth` folder in the `app` folder. -- `[[...path]].tsx` will contain the component for showing SuperTokens UI -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D). +## 1) Create the `app/auth/[[...path]]/page.tsx` page +- Be sure to create the `auth/[[...path]]` folder in the `app` folder. +- `page.tsx` will contain the component for showing SuperTokens UI +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx). ## 2) Create the `Auth` component: -```tsx title="app/auth/[[...path]].tsx" +```tsx title="app/auth/[[...path]]/page.tsx" 'use client'; import { useEffect } from 'react'; diff --git a/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx b/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx index 2d5fd0c70..41439dfbf 100644 --- a/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx @@ -18,7 +18,7 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by ## 1) Create the `app/api/auth/[[...path]]/route.ts` route - Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder. - `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`). -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D). +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts). ## 2) Expose the SuperTokens APIs diff --git a/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx b/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx index 987a76e89..7bf80787d 100644 --- a/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx +++ b/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx @@ -27,7 +27,7 @@ import AppInfoForm from "/src/components/appInfoForm"; ## 1) Create the `app/auth/[[...path]]/page.tsx` page - Be sure to create the `auth/[[...path]]` folder in the `app` folder. - `page.tsx` will contain the component for showing SuperTokens UI -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D). +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx). ## 2) Create the `Auth` component: diff --git a/v2/thirdparty/nextjs/app-directory/setting-up-backend.mdx b/v2/thirdparty/nextjs/app-directory/setting-up-backend.mdx index 6beea3b80..41439dfbf 100644 --- a/v2/thirdparty/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/thirdparty/nextjs/app-directory/setting-up-backend.mdx @@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm" We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`. -## 1) Create the API folder -- Be sure to create the `auth` folder in the `app/api/` folder. -- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`). -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D). +## 1) Create the `app/api/auth/[[...path]]/route.ts` route +- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder. +- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`). +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts). ## 2) Expose the SuperTokens APIs @@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by showNextJSAPIRouteCheckbox > -```tsx title="app/api/auth/[[...path]].ts" +```tsx title="app/api/auth/[[...path]]/route.ts" declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output import { getAppDirRequestHandler } from 'supertokens-node/nextjs'; import { NextRequest, NextResponse } from 'next/server'; // @ts-ignore -import { ensureSuperTokensInit } from '../../../config/backend'; +import { ensureSuperTokensInit } from '../../../../config/backend'; ensureSuperTokensInit(); diff --git a/v2/thirdparty/nextjs/app-directory/setting-up-frontend.mdx b/v2/thirdparty/nextjs/app-directory/setting-up-frontend.mdx index 635a11d76..7bf80787d 100644 --- a/v2/thirdparty/nextjs/app-directory/setting-up-frontend.mdx +++ b/v2/thirdparty/nextjs/app-directory/setting-up-frontend.mdx @@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm"; -## 1) Create the `app/auth/[[...path]].tsx` page -- Be sure to create the `auth` folder in the `app` folder. -- `[[...path]].tsx` will contain the component for showing SuperTokens UI -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D). +## 1) Create the `app/auth/[[...path]]/page.tsx` page +- Be sure to create the `auth/[[...path]]` folder in the `app` folder. +- `page.tsx` will contain the component for showing SuperTokens UI +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx). ## 2) Create the `Auth` component: -```tsx title="app/auth/[[...path]].tsx" +```tsx title="app/auth/[[...path]]/page.tsx" 'use client'; import { useEffect } from 'react'; diff --git a/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-backend.mdx b/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-backend.mdx index 6beea3b80..41439dfbf 100644 --- a/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-backend.mdx @@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm" We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`. -## 1) Create the API folder -- Be sure to create the `auth` folder in the `app/api/` folder. -- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`). -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D). +## 1) Create the `app/api/auth/[[...path]]/route.ts` route +- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder. +- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`). +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts). ## 2) Expose the SuperTokens APIs @@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by showNextJSAPIRouteCheckbox > -```tsx title="app/api/auth/[[...path]].ts" +```tsx title="app/api/auth/[[...path]]/route.ts" declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output import { getAppDirRequestHandler } from 'supertokens-node/nextjs'; import { NextRequest, NextResponse } from 'next/server'; // @ts-ignore -import { ensureSuperTokensInit } from '../../../config/backend'; +import { ensureSuperTokensInit } from '../../../../config/backend'; ensureSuperTokensInit(); diff --git a/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-frontend.mdx b/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-frontend.mdx index 635a11d76..7bf80787d 100644 --- a/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-frontend.mdx +++ b/v2/thirdpartyemailpassword/nextjs/app-directory/setting-up-frontend.mdx @@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm"; -## 1) Create the `app/auth/[[...path]].tsx` page -- Be sure to create the `auth` folder in the `app` folder. -- `[[...path]].tsx` will contain the component for showing SuperTokens UI -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D). +## 1) Create the `app/auth/[[...path]]/page.tsx` page +- Be sure to create the `auth/[[...path]]` folder in the `app` folder. +- `page.tsx` will contain the component for showing SuperTokens UI +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx). ## 2) Create the `Auth` component: -```tsx title="app/auth/[[...path]].tsx" +```tsx title="app/auth/[[...path]]/page.tsx" 'use client'; import { useEffect } from 'react'; diff --git a/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-backend.mdx b/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-backend.mdx index 6beea3b80..41439dfbf 100644 --- a/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-backend.mdx @@ -15,10 +15,10 @@ import AppInfoForm from "/src/components/appInfoForm" We will add all the backend APIs for auth on `/api/auth`. This can be changed by setting the `apiBasePath` property in the `appInfo` object in the `appInfo.ts` file. For the rest of this page, we will assume you are using `/api/auth`. -## 1) Create the API folder -- Be sure to create the `auth` folder in the `app/api/` folder. -- `[[...path]].tsx` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]].tsx`). -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/api/auth/%5B...path%5D). +## 1) Create the `app/api/auth/[[...path]]/route.ts` route +- Be sure to create the `auth/[[...path]]` folder in the `app/api/` folder. +- `route.ts` will use the `getAppDirRequestHandler` helper function exposed by `supertokens-node` which helps in calling all the APIs like sign in, sign up etc. (the full folder path should be `/app/api/auth/[[...path]]/route.ts`). +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/api/auth/%5B...path%5D/route.ts). ## 2) Expose the SuperTokens APIs @@ -28,12 +28,12 @@ We will add all the backend APIs for auth on `/api/auth`. This can be changed by showNextJSAPIRouteCheckbox > -```tsx title="app/api/auth/[[...path]].ts" +```tsx title="app/api/auth/[[...path]]/route.ts" declare let ensureSuperTokensInit: () => void; // typecheck-only, removed from output import { getAppDirRequestHandler } from 'supertokens-node/nextjs'; import { NextRequest, NextResponse } from 'next/server'; // @ts-ignore -import { ensureSuperTokensInit } from '../../../config/backend'; +import { ensureSuperTokensInit } from '../../../../config/backend'; ensureSuperTokensInit(); diff --git a/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-frontend.mdx b/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-frontend.mdx index 635a11d76..7bf80787d 100644 --- a/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-frontend.mdx +++ b/v2/thirdpartypasswordless/nextjs/app-directory/setting-up-frontend.mdx @@ -24,14 +24,14 @@ import AppInfoForm from "/src/components/appInfoForm"; -## 1) Create the `app/auth/[[...path]].tsx` page -- Be sure to create the `auth` folder in the `app` folder. -- `[[...path]].tsx` will contain the component for showing SuperTokens UI -- An example of this can be found [here](https://github.com/supertokens/next.js/tree/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D). +## 1) Create the `app/auth/[[...path]]/page.tsx` page +- Be sure to create the `auth/[[...path]]` folder in the `app` folder. +- `page.tsx` will contain the component for showing SuperTokens UI +- An example of this can be found [here](https://github.com/supertokens/next.js/blob/canary/examples/with-supertokens/app/auth/%5B%5B...path%5D%5D/page.tsx). ## 2) Create the `Auth` component: -```tsx title="app/auth/[[...path]].tsx" +```tsx title="app/auth/[[...path]]/page.tsx" 'use client'; import { useEffect } from 'react';