feat: add Next.js server-side auth and HTTP-only cookie content #8224
+335
−9
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
cshfang
reviewed
Jan 30, 2025
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
|
|
||
| **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. |
There was a problem hiding this comment.
Suggested change
| `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. |
Sanity check: is the parameter here (and elsewhere below) still runtimeOptions?
There was a problem hiding this comment.
Yes the parameter name is still runtimeOptions.
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx
Outdated
Show resolved
Hide resolved
josefaidt
reviewed
Jan 30, 2025
| @@ -123,7 +123,7 @@ export default function ConfigureAmplifyClientSide() { | |||
|
|
|||
| `layout.tsx`: | |||
|
|
|||
| ```jsx | |||
| ```jsx title="src/app/layout.tsx" | |||
There was a problem hiding this comment.
Suggested change
| ```jsx title="src/app/layout.tsx" | |
| ```tsx title="src/app/layout.tsx" |
josefaidt
reviewed
Jan 30, 2025
| @@ -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" | |||
There was a problem hiding this comment.
Suggested change
| ```typescript title="src/components/ConfigureAmplifyClientSide.tsx" | |
| ```tsx title="src/components/ConfigureAmplifyClientSide.tsx" |
josefaidt
reviewed
Jan 30, 2025
| @@ -215,6 +215,172 @@ In this example, if the incoming request is not associated with a valid user ses | |||
|
|
|||
| </Callout> | |||
|
|
|||
| ### (Preview) Perform authentication on the server side and enable HTTP-only cookies | |||
There was a problem hiding this comment.
Suggested change
| ### (Preview) Perform authentication on the server side and enable HTTP-only cookies | |
| ### (Preview) Perform authentication on the server side and enable HttpOnly cookies |
nit for the attribute name
josefaidt
reviewed
Jan 30, 2025
| 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** |
There was a problem hiding this comment.
can we convert the steps to h4's?
josefaidt
reviewed
Jan 30, 2025
| loginWith: { | ||
| email: true, | ||
| externalProviders: { | ||
| google: {...}, |
There was a problem hiding this comment.
Suggested change
| google: {...}, | |
| google: {/* ... */}, |
josefaidt
reviewed
Jan 30, 2025
Comment on lines
+249
to
+257
| import config from '@/amplify_outputs.json'; | ||
|
|
||
| export const { | ||
| runWithAmplifyServerContext | ||
| // highlight-start | ||
| createAuthRouteHandlers, | ||
| // highlight-end | ||
| } = createServerRunner({ | ||
| config, |
There was a problem hiding this comment.
Suggested change
| import config from '@/amplify_outputs.json'; | |
| export const { | |
| runWithAmplifyServerContext | |
| // highlight-start | |
| createAuthRouteHandlers, | |
| // highlight-end | |
| } = createServerRunner({ | |
| config, | |
| import outputs from '@/amplify_outputs.json'; | |
| export const { | |
| runWithAmplifyServerContext | |
| // highlight-start | |
| createAuthRouteHandlers, | |
| // highlight-end | |
| } = createServerRunner({ | |
| config: outputs, |
josefaidt
reviewed
Jan 30, 2025
|
|
||
| Add the following environment variables to your Next.js app. For example in a `.env` file: | ||
|
|
||
| ```shell title=".env" |
There was a problem hiding this comment.
Suggested change
| ```shell title=".env" | |
| ```shell title=".env" showLineNumbers={false} |
does this need to be added to the Hosting env as well?
josefaidt
reviewed
Jan 30, 2025
|
|
||
| ```typescript | ||
| ```typescript title="src/components/client/ConfigureAmplifyClientSide.tsx" |
There was a problem hiding this comment.
Suggested change
| ```typescript title="src/components/client/ConfigureAmplifyClientSide.tsx" | |
| ```tsx title="src/components/client/ConfigureAmplifyClientSide.tsx" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description of changes:
Related GitHub issue #, if available:
Instructions
If this PR should not be merged upon approval for any reason, please submit as a DRAFT
Which product(s) are affected by this PR (if applicable)?
Which platform(s) are affected by this PR (if applicable)?
Please add the product(s)/platform(s) affected to the PR title
Checks
Does this PR conform to the styleguide?
Does this PR include filetypes other than markdown or images? Please add or update unit tests accordingly.
Are any files being deleted with this PR? If so, have the needed redirects been created?
Are all links in MDX files using the MDX link syntax rather than HTML link syntax?
ref: MDX:
[link](https://docs.amplify.aws/)HTML:
<a href="https://docs.amplify.aws/">link</a>When this PR is ready to merge, please check the box below
By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.