Set up Amplify Auth

Prerequisites: Install and configure the Amplify CLI in addition to the Amplify Libraries.

To import existing Amazon Cognito resources into your Amplify project, run the command:

1amplify import auth

1? What type of auth resource do you want to import?
2   Cognito User Pool and Identity Pool
3   Cognito User Pool only

Once you've selected an option, you will be able to search for and import an existing Cognito User Pool and Identity Pool (or User Pool only) within your AWS account. The amplify import auth command will also do the following:

• Automatically populate your Amplify Library configuration files (aws-exports.js, amplifyconfiguration.json) with your chosen Amazon Cognito resource information
• Provide your designated existing Cognito resource as the authentication and authorization mechanism for all auth-dependent categories (API, Storage, and more)
• Enable Lambda functions to access the chosen Cognito resource if you permit it

If you have previously enabled an Amplify category that uses Auth behind the scenes (such as API category), you can run the amplify update auth command to edit your configuration if needed.

After configuring your Authentication options, update your backend and deploy the service by running the push command:

1amplify push

Now, the authentication service has been deployed and you can start using it. To view the deployed services in your project at any time, go to the Amplify console by running the following command:

1amplify console

In your app's entry point (specifically, App.js, index.js, _app.js, or main.js), import and load the configuration file:

1import { Amplify } from 'aws-amplify';
2import config from './amplifyconfiguration.json';
3Amplify.configure(config);

Prerequisites: Install and configure the Amplify CLI in addition to the Amplify Libraries.

Amplify Studio allows you to create auth resources, set up authorization rules, implement multi-factor authentication (MFA), and more through an intuitive UI. To set up Authentication through Amplify Studio, take the following steps:

1. Sign in to the AWS Management Console and open AWS Amplify.
2. In the navigation pane, choose an application.
3. On the application information page, choose the Backend environments tab, then choose Launch Studio.
4. On the Set up menu, choose Authentication.
5. In the Configure login section, choose a login mechanism to add from the Add login mechanism list. Valid options are Username, Phone number, Facebook, Google, Amazon, and Sign in with Apple. If you choose one of the social sign-in mechanisms (specifically, Facebook, Google, Amazon, or Sign in with Apple), you will also need to enter your App ID, App Secret, and redirect URLs.
6. (Optional) Add multi-factor authentication (MFA). MFA is set to Off by default. To turn on MFA, do the following in the Multi-factor authentication section:

• Choose Enforced to require MFA for all users or choose Optional to allow individual users to enable MFA.
• (Optional) Choose SMS, and enter your SMS message.
• (Optional) Choose Authenticator Application if you want your app to load with an authentication flow that includes sign-up and sign-in.

7. In the Configure sign-up section, expand Password protection settings and customize the password policy settings to enforce. Choose Save and Deploy. This starts a CloudFormation deployment with the progress displayed in the upper right corner of the page.
8. After creating and configuring your auth resources, you will need to pull them down from Amplify Studio. To do so, simply select "Local setup instructions" in the upper right-hand corner of the Studio console and run the CLI command it provides at the root directory of your app.

You can also import existing Amazon Cognito resources and manage users and groups through the Amplify Studio UI.

Existing Authentication resources from AWS (such as Amazon Cognito User Pools or Identity Pools) can be used with the Amplify Libraries by calling the Amplify.configure() method.

In your app's entry point (specifically App.js, index.js, _app.js, or main.js), import and load the configuration file:

1import { Amplify } from 'aws-amplify';
2
3Amplify.configure({
4  Auth: {
5    Cognito: {
6      //  Amazon Cognito User Pool ID
7      userPoolId: 'XX-XXXX-X_abcd1234',
8      // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
9      userPoolClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',
10      // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
11      identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
12      // OPTIONAL - Set to true to use your identity pool's unauthenticated role when user is not logged in
13      allowGuestAccess: true
14      // OPTIONAL - This is used when autoSignIn is enabled for Auth.signUp
15      // 'code' is used for Auth.confirmSignUp, 'link' is used for email link verification
16      signUpVerificationMethod: 'code', // 'code' | 'link'
17      loginWith: {
18        // OPTIONAL - Hosted UI configuration
19        oauth: {
20          domain: 'your_cognito_domain',
21          scopes: [
22            'phone',
23            'email',
24            'profile',
25            'openid',
26            'aws.cognito.signin.user.admin'
27          ],
28          redirectSignIn: ['http://localhost:3000/'],
29          redirectSignOut: ['http://localhost:3000/'],
30          responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code
31        }
32      }
33    }
34  }
35});
36
37// You can get the current config object
38const currentConfig = Amplify.getConfig();

OAuth configuration parameters:

These settings can be found in the Cognito User Pools console under the App Integration section

First, install the @aws-amplify/ui-vue library as well as aws-amplify if you have not already:

1npm install aws-amplify @aws-amplify/ui-vue

Next, open src/App.js and add the Authenticator component.

Authenticator

The 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 the cloud resources set up in your Auth cloud resources. You will also notice that user and signOut are passed to the inner template.

1<script setup>
2  import { Authenticator } from "@aws-amplify/ui-vue";
3  import "@aws-amplify/ui-vue/styles.css";
4
5  import { Amplify } from 'aws-amplify';
6  import config from './amplifyconfiguration.json';
7  Amplify.configure(config);
8</script>
9
10<template>
11  <authenticator>
12    <template v-slot="{ user, signOut }">
13      <h1>Hello {{ user.username }}!</h1>
14      <button @click="signOut">Sign Out</button>
15    </template>
16  </authenticator>
17</template>

First, install the @aws-amplify/ui-components library as well as aws-amplify if you have not already:

1npm install aws-amplify @aws-amplify/ui-components

Now open src/main.js and add the following below your last import:

1import '@aws-amplify/ui-components';
2import {
3  applyPolyfills,
4  defineCustomElements
5} from '@aws-amplify/ui-components/loader';
6import Vue from 'vue';
7
8Vue.config.ignoredElements = [/amplify-\w*/];
9
10applyPolyfills().then(() => {
11  defineCustomElements(window);
12});

Next, open src/App.js and add the amplify-authenticator component.

amplify-authenticator

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 the cloud resources set up in your Auth cloud resources. You will also notice the amplify-sign-out component. This is an optional component if you’d like to render a sign-out button.

1<template>
2  <amplify-authenticator>
3    <div>
4      My App
5      <amplify-sign-out></amplify-sign-out>
6    </div>
7  </amplify-authenticator>
8</template>

First, install the @aws-amplify/ui-angular library as well as aws-amplify if you have not already:

1npm install aws-amplify @aws-amplify/ui-angular

Now open app.module.ts and add the Amplify imports and configuration:

1import { NgModule } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser';
3import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';
4
5import { AppComponent } from './app.component';
6import amplifyconfig from './amplifyconfiguration.json';
7
8Amplify.configure(amplifyconfig);
9
10@NgModule({
11  declarations: [AppComponent],
12  imports: [BrowserModule, AmplifyAuthenticatorModule],
13  providers: [],
14  bootstrap: [AppComponent]
15})
16export class AppModule {}

Next, import the default theme inside styles.css:

1@import '~@aws-amplify/ui-angular/theme.css';

Next, open app.component.html and add the amplify-authenticator component.

amplify-authenticator

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 the cloud resources set up in your Auth cloud resources. You will also notice that user and signOut are provided to the inner template.

1<amplify-authenticator>
2  <ng-template
3    amplifySlot="authenticated"
4    let-user="user"
5    let-signOut="signOut"
6  >
7    <h1>Welcome {{ user.username }}!</h1>
8    <button (click)="signOut()">Sign Out</button>
9  </ng-template>
10</amplify-authenticator>