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 6beea3b80..41439dfbf 100644 --- a/v2/passwordless/nextjs/app-directory/setting-up-backend.mdx +++ b/v2/passwordless/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/passwordless/nextjs/app-directory/setting-up-frontend.mdx b/v2/passwordless/nextjs/app-directory/setting-up-frontend.mdx index 635a11d76..7bf80787d 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 -- 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/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';