From e032de533b7d611026592f63877c3e0ba713b4a8 Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Wed, 29 Jan 2025 14:35:24 -0800 Subject: [PATCH 1/3] feat: add Next.js server-side auth and HTTP-only cookie content --- .../server-side-rendering/index.mdx | 168 +++++++++++++++++- .../server-side-rendering/nextjs/index.mdx | 164 ++++++++++++++++- 2 files changed, 323 insertions(+), 9 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx index 5e21f0c6405..7d197a7c3b2 100644 --- a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx +++ b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx @@ -52,7 +52,7 @@ You can create an `amplifyServerUtils.ts` file under a `utils` folder in your co For example, the `utils/amplifyServerUtils.ts` file may contain the following content: -```typescript +```typescript title="src/utils/amplifyServerUtils.ts" import { createServerRunner } from '@aws-amplify/adapter-nextjs'; import outputs from '@/amplify_outputs.json'; @@ -108,7 +108,7 @@ If you're using the Next.js App Router, you can create a client component to con `ConfigureAmplifyClientSide.ts`: -```typescript +```typescript title="src/components/ConfigureAmplifyClientSide.tsx" 'use client'; import { Amplify } from 'aws-amplify'; @@ -123,7 +123,7 @@ export default function ConfigureAmplifyClientSide() { `layout.tsx`: -```jsx +```jsx title="src/app/layout.tsx" import ConfigureAmplifyClientSide from '@/components/ConfigureAmplifyClientSide'; import './globals.css'; @@ -162,7 +162,7 @@ You can use the Amplify Auth category APIs to sign up and sign in your end users You can use the `fetchAuthSession` API to check the auth sessions that are attached to the incoming requests in the middleware of your Next.js app to protect your routes. For example: -```typescript +```typescript title="src/middleware.ts" import { fetchAuthSession } from 'aws-amplify/auth/server'; import { NextRequest, NextResponse } from 'next/server'; import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils'; @@ -215,6 +215,166 @@ In this example, if the incoming request is not associated with a valid user ses +### (Preview) Perform authentication on the server side and enable HTTP-only cookies + + + +**NOTE:** Once you enable the server-side sign-in feature, auth tokens are stored in HTTP-only cookies and you may not change the HTTP-only attribute. Since these cookies are inaccessible from client-side scripts, you won’t be able to use any Amplify JS APIs on the client side. Therefore, you don’t need to configure Amplify on the client side. + + + +**Prerequisites** + +To authenticate users on the server side, you must enable either Amazon Cognito Managed Login or Hosted UI in your Amazon Cognito User Pool client. + + +**Step 1: Specify the origin of your app in environment variables** + +Add the following environment variables to your Next.js app. For example in a `.env` file: + +```shell title=".env" +AMPLIFY_APP_ORIGIN=https://myapp.com +``` + +Ensure this environment variables is accessible in your Next.js app's server runtime. + +**Step 2 - Export the `createAuthRouteHandlers` function** + +`createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. + +```typescript title="utils/amplifyServerUtils.ts" +import { createServerRunner } from '@aws-amplify/adapter-nextjs'; +import config from '@/amplifyconfiguration.json'; + +export const { + runWithAmplifyServerContext + // highlight-start + createAuthRouteHandlers, + // highlight-end +} = createServerRunner({ + config, + // highlight-start + runtimeOptions: { + cookies: { + domain: '.myapp.com', // making cookies available to all subdomains + sameSite: 'strict', + maxAge: 60 * 60 * 24 * 7 // 7 days + } + } + // highlight-end +}); +``` + +**Step 3 - Set up the Auth API routes** + +Create an API route using the `createAuthRouteHandlers` function. For example: + + + +```typescript title="src/app/api/auth/[slug].ts" +import { createAuthRouteHandlers } from "@/amplifyServerUtils"; + +export const GET = createAuthRouteHandlers({ + redirectOnSignInComplete: "/home", + redirectOnSignOutComplete: "/sign-in", +}); +``` + + +```typescript title="src/pages/api/auth/[slug].ts" +import { createAuthRouteHandlers } from "@/amplifyServerUtils"; + +export default createAuthRouteHandlers({ + redirectOnSignInComplete: "/home", + redirectOnSignOutComplete: "/sign-in", +}); +``` + + + +With the above example, Amplify generates the following API routes: + +| API Routes | What it does | +| --------------------------------------------------- | ------------------------------------------------------------ | +| `/api/auth/sign-up` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-up form. After sign-up and sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | +| `/api/auth/sign-in` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-in form. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | +| `/api/auth/sign-in?provider=` | Upon navigating an end user to this route, they’ll be redirected to Amazon Cognito Managed Login. Then, they’ll be redirected to the specified social provider sign-in page. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignOutComplete` parameter. | +| `/api/auth/sign-out` | Upon navigating an end user to this route, the end user will be signed out and redirected to the route specified by the redirectOnSignOutComplete parameter. | +| `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects users back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store. | +| `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this router after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store. | + + +**Step 4 - Provide the redirect URLs to the Auth Resource in Amplify** + +You can provide the callback API routes as the redirect URLs in the Auth resource configuration. For example: + +```ts title="amplify/auth/resource.ts" +export const auth = defineAuth({ + loginWith: { + email: true, + externalProviders: { + google: {...}, + // highlight-start + callbackUrls: ["https://myapp.com/api/auth/sign-in-callback"], + logoutUrls: ["https://myapp.com/api/auth/sign-out-callback"], + // highlight-end + }, + }, +}); +``` +**Step 5 - Use Anchor link for initiating server-side authentication flows** + +Use HTML anchor links to navigate users to the sign-in and sign-up routes. For example: + + + +```tsx title="src/components/SignInButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + +```tsx title="src/components/SignInWithGoogleButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + +```tsx title="src/components/SignUpButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + +```tsx title="src/components/SignOutButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + + +When an end user clicks on the buttons above, a corresponding server-side authentication flow will be initiated. + ## Calling Amplify category APIs on the server side For the **Auth** categories to use Amplify APIs on the server in your Next.js app, you will need to: diff --git a/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx b/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx index f10af2674ac..35faf9d6782 100644 --- a/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx +++ b/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx @@ -50,7 +50,7 @@ You can create an `amplifyServerUtils.ts` file under a `utils` folder in your co For example, the `utils/amplifyServerUtils.ts` file may contain the following content: -```typescript +```typescript title="src/utils/amplifyServerUtils.ts" import { createServerRunner } from '@aws-amplify/adapter-nextjs'; import config from '@/amplifyconfiguration.json'; @@ -108,9 +108,9 @@ To avoid repetitive calls to `Amplify.configure`, you can call it once in a top- If you're using the Next.js App Router, you can create a client component to configure Amplify and import it into your root layout. -`ConfigureAmplifyClientSide.ts`: +`ConfigureAmplifyClientSide.tsx`: -```typescript +```typescript title="src/components/client/ConfigureAmplifyClientSide.tsx" 'use client'; import { Amplify } from 'aws-amplify'; @@ -125,7 +125,7 @@ export default function ConfigureAmplifyClientSide() { `layout.tsx`: -```jsx +```jsx title="src/app/layout.tsx" import ConfigureAmplifyClientSide from '@/components/ConfigureAmplifyClientSide'; import './globals.css'; @@ -164,7 +164,7 @@ You can use the Amplify Auth category APIs to sign up and sign in your end users You can use the `fetchAuthSession` API to check the auth sessions that are attached to the incoming requests in the middleware of your Next.js app to protect your routes. For example: -```typescript +```typescript title="src/middleware.ts" import { fetchAuthSession } from 'aws-amplify/auth/server'; import { NextRequest, NextResponse } from 'next/server'; import { runWithAmplifyServerContext } from '@/utils/amplifyServerUtils'; @@ -217,6 +217,160 @@ In this example, if the incoming request is not associated with a valid user ses +### (Preview) Perform authentication on the server side and enable HTTP-only cookies + + + +**NOTE:** Once you enable the server-side sign-in feature, auth tokens are stored in HTTP-only cookies and you may not change the HTTP-only attribute. Since these cookies are inaccessible from client-side scripts, you won’t be able to use any Amplify JS APIs on the client side. Therefore, you don’t need to configure Amplify on the client side. + + + +**Prerequisites** + +To authenticate users on the server side, you must enable either Amazon Cognito Managed Login or Hosted UI in your Amazon Cognito User Pool client. + + +**Step 1: Specify the origin of your app in environment variables** + +Add the following environment variables to your Next.js app. For example in a `.env` file: + +```shell title=".env" +AMPLIFY_APP_ORIGIN=https://myapp.com +``` + +Ensure this environment variables is accessible in your Next.js app's server runtime. + +**Step 2 - Export the `createAuthRouteHandlers` function** + +`createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. + +```typescript title="utils/amplifyServerUtils.ts" +import { createServerRunner } from '@aws-amplify/adapter-nextjs'; +import config from '@/amplifyconfiguration.json'; + +export const { + runWithAmplifyServerContext + // highlight-start + createAuthRouteHandlers, + // highlight-end +} = createServerRunner({ + config, + // highlight-start + runtimeOptions: { + cookies: { + domain: '.myapp.com', // making cookies available to all subdomains + sameSite: 'strict', + maxAge: 60 * 60 * 24 * 7 // 7 days + } + } + // highlight-end +}); +``` + +**Step 3 - Set up the Auth API routes** + +Create an API route using the `createAuthRouteHandlers` function. For example: + + + +```typescript title="src/app/api/auth/[slug].ts" +import { createAuthRouteHandlers } from "@/amplifyServerUtils"; + +export const GET = createAuthRouteHandlers({ + redirectOnSignInComplete: "/home", + redirectOnSignOutComplete: "/sign-in", +}); +``` + + +```typescript title="src/pages/api/auth/[slug].ts" +import { createAuthRouteHandlers } from "@/amplifyServerUtils"; + +export default createAuthRouteHandlers({ + redirectOnSignInComplete: "/home", + redirectOnSignOutComplete: "/sign-in", +}); +``` + + + +With the above example, Amplify generates the following API routes: + +| API Routes | What it does | +| --------------------------------------------------- | ------------------------------------------------------------ | +| `/api/auth/sign-up` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-up form. After sign-up and sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | +| `/api/auth/sign-in` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-in form. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | +| `/api/auth/sign-in?provider=` | Upon navigating an end user to this route, they’ll be redirected to Amazon Cognito Managed Login. Then, they’ll be redirected to the specified social provider sign-in page. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignOutComplete` parameter. | +| `/api/auth/sign-out` | Upon navigating an end user to this route, the end user will be signed out and redirected to the route specified by the redirectOnSignOutComplete parameter. | +| `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects users back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store. | +| `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this router after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store. | + + +**Step 4 - Provide the redirect URLs to the Auth Resource in Amplify** + +You can run `amplify add auth` or `amplify update auth` to provide the callback API routes as the redirect URLs. See [Configure the Auth category](/gen1/[platform]/build-a-backend/auth/add-social-provider/#configure-the-auth-category) for more details. With the above example, you can provide the following redirect URLs: + +``` +// redirect signin URI: +https://myapp.com/api/auth/sign-in-callback + +// redirect signout URI: +https://myapp.com/api/auth/sign-out-callback +``` + +**Step 5 - Use Anchor link for initiating server-side authentication flows** + +Use HTML anchor links to navigate users to the sign-in and sign-up routes. For example: + + + +```tsx title="src/components/SignInButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + +```tsx title="src/components/SignInWithGoogleButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + +```tsx title="src/components/SignUpButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + +```tsx title="src/components/SignOutButton.tsx" +export const SignInButton() { + return ( + + Sign In + + ); +} +``` + + + +When an end user clicks on the buttons above, a corresponding server-side authentication flow will be initiated. + ## Calling Amplify category APIs on the server side For the **Auth**, **REST APIs**, and **Storage** categories to use Amplify APIs on the server in your Next.js app, you will need to: From 437d9b8f08465a147b37eeecbee3fda1d730bb3e Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Wed, 29 Jan 2025 16:03:10 -0800 Subject: [PATCH 2/3] chore: add required callouts --- .../build-a-backend/server-side-rendering/index.mdx | 6 ++++++ .../build-a-backend/server-side-rendering/nextjs/index.mdx | 6 ++++++ 2 files changed, 12 insertions(+) diff --git a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx index 7d197a7c3b2..174687f1d05 100644 --- a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx +++ b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx @@ -238,6 +238,8 @@ AMPLIFY_APP_ORIGIN=https://myapp.com Ensure this environment variables is accessible in your Next.js app's server runtime. +> **Note:** Token cookies are transmitted via server-side authentication flows. In production environments, it is recommended to use HTTPS as the origin for enhanced security. + **Step 2 - Export the `createAuthRouteHandlers` function** `createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. @@ -303,6 +305,10 @@ With the above example, Amplify generates the following API routes: | `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects users back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store. | | `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this router after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store. | +> **Note:** A signing-out call involves multiple steps, including signing out from Amazon Cognito Managed Login, revoking tokens, and removing cookies. If the user closes the browser during the process, the following may occur: +> +> 1. auth token have not been revoked - user remains signed in +> 2. auth token have been revoked but cookies have not been removed - cookies will be removed when the user visits the app again **Step 4 - Provide the redirect URLs to the Auth Resource in Amplify** diff --git a/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx b/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx index 35faf9d6782..743829a7333 100644 --- a/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx +++ b/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx @@ -240,6 +240,8 @@ AMPLIFY_APP_ORIGIN=https://myapp.com Ensure this environment variables is accessible in your Next.js app's server runtime. +> **Note:** Token cookies are transmitted via server-side authentication flows. In production environments, it is recommended to use HTTPS as the origin for enhanced security. + **Step 2 - Export the `createAuthRouteHandlers` function** `createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. @@ -305,6 +307,10 @@ With the above example, Amplify generates the following API routes: | `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects users back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store. | | `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this router after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store. | +> **Note:** A signing-out call involves multiple steps, including signing out from Amazon Cognito Managed Login, revoking tokens, and removing cookies. If the user closes the browser during the process, the following may occur: +> +> 1. auth token have not been revoked - user remains signed in +> 2. auth token have been revoked but cookies have not been removed - cookies will be removed when the user visits the app again **Step 4 - Provide the redirect URLs to the Auth Resource in Amplify** From 0e0a7deae2e633d54d5a89f4b9e57c847f1e7818 Mon Sep 17 00:00:00 2001 From: Hui Zhao Date: Wed, 29 Jan 2025 16:21:01 -0800 Subject: [PATCH 3/3] chore: resolve comments --- .../server-side-rendering/index.mdx | 34 +++++++++---------- .../server-side-rendering/nextjs/index.mdx | 32 ++++++++--------- 2 files changed, 33 insertions(+), 33 deletions(-) diff --git a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx index 174687f1d05..fed228ee803 100644 --- a/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx +++ b/src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx @@ -228,7 +228,7 @@ In this example, if the incoming request is not associated with a valid user ses To authenticate users on the server side, you must enable either Amazon Cognito Managed Login or Hosted UI in your Amazon Cognito User Pool client. -**Step 1: Specify the origin of your app in environment variables** +**Step 1 - Specify the origin of your app in environment variables** Add the following environment variables to your Next.js app. For example in a `.env` file: @@ -242,11 +242,11 @@ Ensure this environment variables is accessible in your Next.js app's server run **Step 2 - Export the `createAuthRouteHandlers` function** -`createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. +The `createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. ```typescript title="utils/amplifyServerUtils.ts" import { createServerRunner } from '@aws-amplify/adapter-nextjs'; -import config from '@/amplifyconfiguration.json'; +import config from '@/amplify_outputs.json'; export const { runWithAmplifyServerContext @@ -272,7 +272,7 @@ export const { Create an API route using the `createAuthRouteHandlers` function. For example: - + ```typescript title="src/app/api/auth/[slug].ts" import { createAuthRouteHandlers } from "@/amplifyServerUtils"; @@ -282,7 +282,7 @@ export const GET = createAuthRouteHandlers({ }); ``` - + ```typescript title="src/pages/api/auth/[slug].ts" import { createAuthRouteHandlers } from "@/amplifyServerUtils"; @@ -298,12 +298,12 @@ With the above example, Amplify generates the following API routes: | API Routes | What it does | | --------------------------------------------------- | ------------------------------------------------------------ | -| `/api/auth/sign-up` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-up form. After sign-up and sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | -| `/api/auth/sign-in` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-in form. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | -| `/api/auth/sign-in?provider=` | Upon navigating an end user to this route, they’ll be redirected to Amazon Cognito Managed Login. Then, they’ll be redirected to the specified social provider sign-in page. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignOutComplete` parameter. | -| `/api/auth/sign-out` | Upon navigating an end user to this route, the end user will be signed out and redirected to the route specified by the redirectOnSignOutComplete parameter. | -| `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects users back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store. | -| `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this router after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store. | +| `/api/auth/sign-up` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-up form. After sign-up and sign-in, they’ll be redirected back to the route `/api/auth/sign-in-callback`. | +| `/api/auth/sign-in` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-in form. After sign-in, they’ll be redirected back to the route `/api/auth/sign-in-callback`. | +| `/api/auth/sign-in?provider=` | Upon navigating an end user to this route, they’ll be redirected to first to the Amazon Cognito Managed Login and then the specified social provider sign-in page. After sign-in, they’ll be redirected back to the route `/api/auth/sign-in-callback`. | +| `/api/auth/sign-out` | Upon navigating an end user to this route, the end user will be signed out and redirected to the route `/api/auth/sign-out-callback`. | +| `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects an end user back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store, then redirects the end user back to the route specified by the `redirectOnSignInComplete` parameter. | +| `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this route after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store, then redirects the end user back to the route specified by the `redirectOnSignOutComplete` parameter. | > **Note:** A signing-out call involves multiple steps, including signing out from Amazon Cognito Managed Login, revoking tokens, and removing cookies. If the user closes the browser during the process, the following may occur: > @@ -346,10 +346,10 @@ export const SignInButton() { ```tsx title="src/components/SignInWithGoogleButton.tsx" -export const SignInButton() { +export const SignInWithGoogleButton() { return ( - Sign In + Sign In with Google ); } @@ -357,10 +357,10 @@ export const SignInButton() { ```tsx title="src/components/SignUpButton.tsx" -export const SignInButton() { +export const SignUpButton() { return ( - Sign In + Sign Up ); } @@ -368,10 +368,10 @@ export const SignInButton() { ```tsx title="src/components/SignOutButton.tsx" -export const SignInButton() { +export const SignOutButton() { return ( - Sign In + Sign Out ); } diff --git a/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx b/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx index 743829a7333..218776a8734 100644 --- a/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx +++ b/src/pages/gen1/[platform]/build-a-backend/server-side-rendering/nextjs/index.mdx @@ -230,7 +230,7 @@ In this example, if the incoming request is not associated with a valid user ses To authenticate users on the server side, you must enable either Amazon Cognito Managed Login or Hosted UI in your Amazon Cognito User Pool client. -**Step 1: Specify the origin of your app in environment variables** +**Step 1 - Specify the origin of your app in environment variables** Add the following environment variables to your Next.js app. For example in a `.env` file: @@ -244,7 +244,7 @@ Ensure this environment variables is accessible in your Next.js app's server run **Step 2 - Export the `createAuthRouteHandlers` function** -`createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. +The `createAuthRouteHandlers` function is created by the `createServerRunner` function call when you configure Amplify for server-side usage. You can export this function from your `amplifyServerUtils.ts` file. You can also configure cookie attributes with the `runtimeOptions` parameter. ```typescript title="utils/amplifyServerUtils.ts" import { createServerRunner } from '@aws-amplify/adapter-nextjs'; @@ -274,7 +274,7 @@ export const { Create an API route using the `createAuthRouteHandlers` function. For example: - + ```typescript title="src/app/api/auth/[slug].ts" import { createAuthRouteHandlers } from "@/amplifyServerUtils"; @@ -284,7 +284,7 @@ export const GET = createAuthRouteHandlers({ }); ``` - + ```typescript title="src/pages/api/auth/[slug].ts" import { createAuthRouteHandlers } from "@/amplifyServerUtils"; @@ -300,12 +300,12 @@ With the above example, Amplify generates the following API routes: | API Routes | What it does | | --------------------------------------------------- | ------------------------------------------------------------ | -| `/api/auth/sign-up` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-up form. After sign-up and sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | -| `/api/auth/sign-in` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-in form. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignInComplete` parameter. | -| `/api/auth/sign-in?provider=` | Upon navigating an end user to this route, they’ll be redirected to Amazon Cognito Managed Login. Then, they’ll be redirected to the specified social provider sign-in page. After sign-in, they’ll be redirected back to the route specified by the `redirectOnSignOutComplete` parameter. | -| `/api/auth/sign-out` | Upon navigating an end user to this route, the end user will be signed out and redirected to the route specified by the redirectOnSignOutComplete parameter. | -| `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects users back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store. | -| `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this router after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store. | +| `/api/auth/sign-up` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-up form. After sign-up and sign-in, they’ll be redirected back to the route `/api/auth/sign-in-callback`. | +| `/api/auth/sign-in` | Upon navigating an end user to this route, they’ll be redirected to the Amazon Cognito Managed Login sign-in form. After sign-in, they’ll be redirected back to the route `/api/auth/sign-in-callback`. | +| `/api/auth/sign-in?provider=` | Upon navigating an end user to this route, they’ll be redirected to first to the Amazon Cognito Managed Login and then the specified social provider sign-in page. After sign-in, they’ll be redirected back to the route `/api/auth/sign-in-callback`. | +| `/api/auth/sign-out` | Upon navigating an end user to this route, the end user will be signed out and redirected to the route `/api/auth/sign-out-callback`. | +| `/api/auth/sign-in-callback` | Amazon Cognito Managed Login redirects an end user back to this route after signing in. Amplify exchanges auth tokens and stores them as HTTP-only cookies in the browser cookie store, then redirects the end user back to the route specified by the `redirectOnSignInComplete` parameter. | +| `/api/auth/sign-out-callback` | Amazon Cognito Managed Login redirects an end user back to this route after signing out, Amplify revokes access token and refresh token and removes token cookies from browser cookie store, then redirects the end user back to the route specified by the `redirectOnSignOutComplete` parameter. | > **Note:** A signing-out call involves multiple steps, including signing out from Amazon Cognito Managed Login, revoking tokens, and removing cookies. If the user closes the browser during the process, the following may occur: > @@ -342,10 +342,10 @@ export const SignInButton() { ```tsx title="src/components/SignInWithGoogleButton.tsx" -export const SignInButton() { +export const SignInWithGoogleButton() { return ( - Sign In + Sign In with Google ); } @@ -353,10 +353,10 @@ export const SignInButton() { ```tsx title="src/components/SignUpButton.tsx" -export const SignInButton() { +export const SignUpButton() { return ( - Sign In + Sign Up ); } @@ -364,10 +364,10 @@ export const SignInButton() { ```tsx title="src/components/SignOutButton.tsx" -export const SignInButton() { +export const SignOutButton() { return ( - Sign In + Sign Out ); }