From fb05a1d460cff258093ddd47a1652ed8caec9194 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Fri, 1 Nov 2024 08:11:57 -0700
Subject: [PATCH 1/4] separate vanilla react and next.js auth example
---
.../auth/set-up-auth/index.mdx | 55 ++++++++++++++-----
1 file changed, 42 insertions(+), 13 deletions(-)
diff --git a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
index 3fae274bd6d..11b103cf9c3 100644
--- a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
@@ -100,7 +100,7 @@ Creating and correctly implementing the sign-in flow can be challenging and time
Amplify has pre-built UI components for React, Vue, Angular, React Native, Swift, Android, and Flutter. In this guide, we are focusing on those for web applications.
-<InlineFilter filters={["javascript", "react"]}>
+<InlineFilter filters={["javascript", "next.js", "react"]}>
First, install the `@aws-amplify/ui-react` library:
@@ -108,9 +108,38 @@ First, install the `@aws-amplify/ui-react` library:
npm add @aws-amplify/ui-react
```
+<InlineFilter filters={["javascript", "react"]}>
+
+Next, open **pages/App.tsx** and add the `Authenticator` component.
+
+```tsx title="pages/App.tsx"
+import { Authenticator } from '@aws-amplify/ui-react';
+import { Amplify } from 'aws-amplify';
+import outputs from '../amplify_outputs.json';
+import '@aws-amplify/ui-react/styles.css';
+
+Amplify.configure(outputs);
+
+export default function App() {
+ return (
+ <Authenticator>
+ {({ signOut, user }) => (
+ <main>
+ <h1>Hello {user?.username}</h1>
+ <button onClick={signOut}>Sign out</button>
+ </main>
+ )}
+ </Authenticator>
+ );
+};
+```
+
+</InlineFilter>
+<InlineFilter filters={["next.js"]}>
+
Next, open **pages/\_app.tsx** and add the `Authenticator` component.
-```ts title="pages/_app.tsx"
+```tsx title="pages/_app.tsx"
import type { AppProps } from 'next/app';
import { Authenticator } from '@aws-amplify/ui-react';
import { Amplify } from 'aws-amplify';
@@ -134,6 +163,7 @@ export default function App({ Component, pageProps }: AppProps) {
};
```
+</InlineFilter>
</InlineFilter>
<InlineFilter filters={["vue"]}>
<BlockSwitcher>
@@ -183,7 +213,7 @@ npm add @aws-amplify/ui-components
Now open **src/main.ts** and add the following below your last import:
-```js title="src/main.ts"
+```ts title="src/main.ts"
import '@aws-amplify/ui-components';
import {
applyPolyfills,
@@ -204,7 +234,7 @@ Next, open **src/App.ts** and add the `amplify-authenticator` component.
The `amplify-authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by your backend Auth resources. The optional `amplify-sign-out` component is available if you would like to render a sign-out button.
-```html title="src/App.ts"
+```html title="src/App.vue"
<template>
<amplify-authenticator>
<div>
@@ -229,7 +259,7 @@ npm add @aws-amplify/ui-angular
Now open **app.module.ts** and add the Amplify imports and configuration:
-```js title="app.module.ts"
+```ts title="app.module.ts"
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
@@ -314,8 +344,7 @@ npx expo prebuild
</Callout>
Next, update the `App.tsx` file with the following to set up the authentication flow:
-```typescript
-import React from "react";
+```tsx
import { Button, View, StyleSheet, SafeAreaView } from "react-native";
import { Amplify } from "aws-amplify";
import { Authenticator, useAuthenticator } from "@aws-amplify/ui-react-native";
@@ -323,6 +352,12 @@ import outputs from "./amplify_outputs.json";
Amplify.configure(outputs);
+const styles = StyleSheet.create({
+ signOutButton: {
+ alignSelf: "flex-end",
+ },
+});
+
const SignOutButton = () => {
const { signOut } = useAuthenticator();
@@ -345,12 +380,6 @@ const App = () => {
);
};
-const styles = StyleSheet.create({
- signOutButton: {
- alignSelf: "flex-end",
- },
-});
-
export default App;
```
From 739123ee6ddbbfc1e533c99ebe7c563aec619f9a Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Fri, 1 Nov 2024 08:13:01 -0700
Subject: [PATCH 2/4] next.js -> nextjs in filter
---
.../fullstack-branching/monorepos/index.mdx | 9 +++------
1 file changed, 3 insertions(+), 6 deletions(-)
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
index 6767407744f..e9b4b9e1b70 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
@@ -54,7 +54,7 @@ Amplify Gen 2 supports monorepo workflows for fullstack builds with monorepo too
└── package.json
```
-Monorepos require a slightly different setup. We are going to deploy 3 Amplify apps:
+Monorepos require a slightly different setup. We are going to deploy three separate Amplify apps:
1. `my-shared-backend`
2. `admin-dashboard`
@@ -65,11 +65,8 @@ Monorepos require a slightly different setup. We are going to deploy 3 Amplify a
The first app, `my-shared-backend`, will be the only app that updates changes to the backend. The other apps will only run frontend builds that point to the shared backend.
1. To get started, deploy the shared backend Amplify app. With Gen 2, you can now setup backend-only CI/CD apps. Navigate to the Amplify console and select **Create new app**.
-
-1. Once you connect your repository, select your monorepo project. Check the box that says **My app is a monorepo** and enter the path to your amplify backend.
-
-
-
+2. Once you connect your repository, select your monorepo project. Check the box that says **My app is a monorepo** and enter the path to your amplify backend.
+ 
3. Your build settings should be automatically detected. Save and deploy.
## Deploy frontend apps
From a8af795d59c455a4369477d41ce43e99399a86b4 Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Fri, 1 Nov 2024 08:24:11 -0700
Subject: [PATCH 3/4] Revert "next.js -> nextjs in filter"
This reverts commit 739123ee6ddbbfc1e533c99ebe7c563aec619f9a.
---
.../fullstack-branching/monorepos/index.mdx | 9 ++++++---
1 file changed, 6 insertions(+), 3 deletions(-)
diff --git a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
index e9b4b9e1b70..6767407744f 100644
--- a/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
+++ b/src/pages/[platform]/deploy-and-host/fullstack-branching/monorepos/index.mdx
@@ -54,7 +54,7 @@ Amplify Gen 2 supports monorepo workflows for fullstack builds with monorepo too
└── package.json
```
-Monorepos require a slightly different setup. We are going to deploy three separate Amplify apps:
+Monorepos require a slightly different setup. We are going to deploy 3 Amplify apps:
1. `my-shared-backend`
2. `admin-dashboard`
@@ -65,8 +65,11 @@ Monorepos require a slightly different setup. We are going to deploy three separ
The first app, `my-shared-backend`, will be the only app that updates changes to the backend. The other apps will only run frontend builds that point to the shared backend.
1. To get started, deploy the shared backend Amplify app. With Gen 2, you can now setup backend-only CI/CD apps. Navigate to the Amplify console and select **Create new app**.
-2. Once you connect your repository, select your monorepo project. Check the box that says **My app is a monorepo** and enter the path to your amplify backend.
- 
+
+1. Once you connect your repository, select your monorepo project. Check the box that says **My app is a monorepo** and enter the path to your amplify backend.
+
+
+
3. Your build settings should be automatically detected. Save and deploy.
## Deploy frontend apps
From d5145133faa15674a9e548ae891623c0acfcfc2d Mon Sep 17 00:00:00 2001
From: josefaidt <josef.aidt@gmail.com>
Date: Fri, 1 Nov 2024 08:24:42 -0700
Subject: [PATCH 4/4] next.js -> nextjs
---
.../[platform]/build-a-backend/auth/set-up-auth/index.mdx | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
index 11b103cf9c3..f7e54c9f34e 100644
--- a/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
+++ b/src/pages/[platform]/build-a-backend/auth/set-up-auth/index.mdx
@@ -100,7 +100,7 @@ Creating and correctly implementing the sign-in flow can be challenging and time
Amplify has pre-built UI components for React, Vue, Angular, React Native, Swift, Android, and Flutter. In this guide, we are focusing on those for web applications.
-<InlineFilter filters={["javascript", "next.js", "react"]}>
+<InlineFilter filters={["javascript", "nextjs", "react"]}>
First, install the `@aws-amplify/ui-react` library:
@@ -135,7 +135,7 @@ export default function App() {
```
</InlineFilter>
-<InlineFilter filters={["next.js"]}>
+<InlineFilter filters={["nextjs"]}>
Next, open **pages/\_app.tsx** and add the `Authenticator` component.