Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add Next.js server-side auth and HTTP-only cookie content #8224

Merged
merged 9 commits into from
Feb 12, 2025
Merged

feat: add Next.js server-side auth and HTTP-only cookie content #8224

merged 9 commits into from
Feb 12, 2025

Conversation

HuiSF
Copy link
Member

@HuiSF HuiSF commented Jan 29, 2025

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)?

  • amplify-cli
  • amplify-ui
  • amplify-studio
  • amplify-hosting
  • amplify-libraries

Which platform(s) are affected by this PR (if applicable)?

  • JS
  • Swift
  • Android
  • Flutter
  • React Native

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

  • Ready to merge

By submitting this pull request, I confirm that my contribution is made under the terms of the Apache 2.0 license.

cshfang
cshfang reviewed Jan 30, 2025
View reviewed changes
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx Outdated

**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.
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes the parameter name is still runtimeOptions.

josefaidt
josefaidt reviewed Jan 30, 2025
View reviewed changes
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx Outdated
@@ -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"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```typescript title="src/components/ConfigureAmplifyClientSide.tsx"
```tsx title="src/components/ConfigureAmplifyClientSide.tsx"

josefaidt
josefaidt reviewed Jan 30, 2025
View reviewed changes
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx Outdated
@@ -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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated.

josefaidt
josefaidt reviewed Jan 30, 2025
View reviewed changes
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx Outdated

Add the following environment variables to your Next.js app. For example in a `.env` file:

```shell title=".env"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
```shell title=".env"
```shell title=".env" showLineNumbers={false}

does this need to be added to the Hosting env as well?

ashika112
ashika112 reviewed Feb 3, 2025
View reviewed changes
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx Outdated
import config from '@/amplify_outputs.json';

export const {
runWithAmplifyServerContext
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
runWithAmplifyServerContext
runWithAmplifyServerContext,

@HuiSF HuiSF marked this pull request as ready for review February 4, 2025 22:44
@HuiSF HuiSF requested a review from dbanksdesign as a code owner February 4, 2025 22:44
ashika112
ashika112 reviewed Feb 10, 2025
View reviewed changes
src/pages/[platform]/build-a-backend/server-side-rendering/index.mdx

This enables Amazon Cognito Hosted UI to support the server-side authentication flows. You may upgrade to the latest Amazon Cognito Managed Login Branding to customize the sign-in and sign-up pages. See [Amazon Cognito user pool managed login](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-managed-login.html) for more information.

#### Step 5 - Use Anchor link for initiating server-side authentication flows
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

just minor nit: I think the example here could be just one page server side on page.tsx example. Rather than these button components.

Since i think these components are just given and not told where to use it. And new to next devs can put it on client side as well.

Copy link
Member Author

@HuiSF HuiSF Feb 11, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately using anchor link directly in page.tsx trigger Next eslint rules, and it recommends to use Link component provided by Next.js, which enforces to prefetch linked resource and causes unexpected errors. So we give button example to ensure it works out of box.

ashika112
ashika112 previously approved these changes Feb 10, 2025
View reviewed changes
jjarvisp
jjarvisp previously approved these changes Feb 10, 2025
View reviewed changes
Copy link
Member

@jjarvisp jjarvisp left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good!

@HuiSF HuiSF dismissed stale reviews from jjarvisp and ashika112 via f54ca4e February 12, 2025 00:53
@HuiSF HuiSF merged commit cb9552e into main Feb 12, 2025
12 checks passed
@HuiSF HuiSF deleted the hui/feat/next-js-server-auth branch February 12, 2025 20:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@cshfang cshfang cshfang left review comments

@dbanksdesign dbanksdesign dbanksdesign approved these changes

@josefaidt josefaidt josefaidt approved these changes

@ashika112 ashika112 ashika112 left review comments

@jjarvisp jjarvisp jjarvisp left review comments

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@HuiSF @dbanksdesign @josefaidt @cshfang @ashika112 @jjarvisp