Set up Amplify Auth
Authentication with Amplify
Amplify uses Amazon Cognito as the main authentication provider. Amazon Cognito is a robust user directory service that handles user registration, authentication, account recovery & other operations. In this tutorial, you'll learn how to add authentication to your application using Amazon Cognito and username/password login.
Install Amplify Libraries
Instructions for React Native version 0.72 and below
@aws-amplify/react-native
requires a minimum iOS deployment target of 13.0
if you are using react-native
version less than or equal to 0.72
. Open the Podfile located in the ios directory and update the target
value:
- platform :ios, min_ios_version_supported + platform :ios, 13.0
Install the necessary dependencies by running the following command:
npm install @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values
You will also need to install the pod dependencies for iOS:
npx pod-install
After installing pod dependencies, rebuild the app:
npm run ios
Install the necessary dependencies by running the following command:
npm install @aws-amplify/react-native @react-native-community/netinfo @react-native-async-storage/async-storage react-native-get-random-values
Set Up Backend Resources
The most common way to use Authentication with Amplify is via the Amplify CLI, which allows you to create new Amazon Cognito resources or import existing ones. However, you can also use the Amplify Studio console to configure authentication or use the Amplify.configure()
method to set up authentication with existing resources.
Prerequisites: Install and configure the Amplify CLI in addition to the Amplify libraries and necessary dependencies.
To start provisioning auth resources in the backend, go to your project directory and execute the command:
amplify add auth
? Do you want to use the default authentication and security configuration? Default configuration? How do you want users to be able to sign in? Username? Do you want to configure advanced settings? No, I am done.
If you have previously enabled an Amplify category that uses Auth behind the scenes (e.g. API category), you can run the
amplify update auth
command to edit your configuration if needed.
The CLI prompts will help you to customize your auth flow for your app. With the provided options, you can:
- Customize sign-in/registration flow
- Customize email and SMS messages for Multi-Factor Authentication
- Customize attributes for your users, e.g. name, email
- Enable 3rd party social providers, e.g. Facebook, Twitter, Google and Amazon
If you wish to federate with social providers you will need to configure them first.
After configuring your Authentication options, update your backend and deploy the service by running the push
command:
amplify 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 Amplify Console by running the following command:
amplify console
In your app's entry point (i.e. App.js, index.js, _app.js, or main.js), import and load the configuration file:
import { Amplify, Auth } from 'aws-amplify';import amplifyconfig from './amplifyconfiguration.json';Amplify.configure(amplifyconfig);
Prerequisites: Install and configure the Amplify CLI in addition to the Amplify libraries and necessary dependencies.
To import existing Amazon Cognito resources into your Amplify project, execute the command:
amplify import auth
? What type of auth resource do you want to import? Cognito User Pool and Identity Pool Cognito User Pool only
Once you've selected an option, you'll 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 & 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 (e.g. 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:
amplify 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 Amplify Console by running the following command:
amplify console
In your app's entry point (i.e. App.js, index.js, _app.js, or main.js), import and load the configuration file:
import { Amplify, Auth } from 'aws-amplify';import amplifyconfig from './amplifyconfiguration.json';Amplify.configure(amplifyconfig);
Prerequisites: Install and configure the Amplify CLI in addition to the Amplify libraries and necessary dependencies.
Amplify Studio allows you create auth resources, set up authorization rules, implement Multi-factor authentication (MFA), and more via an intuitive UI. To set up Authentication through the Amplify Studio, take the following steps:
- Sign in to the AWS Management Console and open AWS Amplify.
- In the navigation pane, choose an application.
- On the application information page, choose the Backend environments tab, then choose Launch Studio.
- On the Set up menu, choose Authentication.
- In the Configure log in 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 (i.e. Facebook, Google, Amazon, or Sign in with Apple), you will also need to enter your App ID, App Secret, and redirect URLs.
- (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.
- In the Configure sign up section, expand Password protection settings and customize the password policy settings to enforce. u6. Choose Save and Deploy. This starts a CloudFormation deployment with the progress displayed in the upper right corner of the page.
- After creating and configuring your auth resources, you'll need to pull them down from Amplify Studio. To do so, simply click on "Local setup instructions" in the upper right hand corner of the Studio console and execute 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 (e.g. Amazon Cognito UserPools or Identity Pools) can be used with the Amplify Libraries by calling the Amplify.configure()
method.
In your app's entry point (i.e. App.js, index.js, _app.js, or main.js), import and load the configuration file:
import { Amplify } from 'aws-amplify';
Amplify.configure({ Auth: { Cognito: { // Amazon Cognito User Pool ID userPoolId: 'XX-XXXX-X_abcd1234',
// OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string) userPoolClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3', // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
// OPTIONAL - This is used when autoSignIn is enabled for Auth.signUp // 'code' is used for Auth.confirmSignUp, 'link' is used for email link verification signUpVerificationMethod: 'code', // 'code' | 'link' loginWith: { // OPTIONAL - Hosted UI configuration oauth: { domain: 'your_cognito_domain',
scopes: [ 'phone', 'email', 'profile', 'openid', 'aws.cognito.signin.user.admin' ], redirectSignIn: ['http://localhost:3000/'], redirectSignOut: ['http://localhost:3000/'], responseType: 'code' // or 'token', note that REFRESH token will only be generated when the responseType is code } } } }});
// You can get the current config objectconst currentConfig = Amplify.getConfig();
OAuth configuration parameters:
These settings can be found in the Cognito User Pools console under App Integration section
domain
: This can be found in the Domain name sub sectionscope
: Remember to have the scope allowed on the Cognito App client, this can be found on App client settings sub sectionredirectSignIn
: URL must be present on Callback URL(s) , check on App client settings sub sectionredirectSignOut
: URL must be present on Sign out URL(s), check on App client settings sub sectionresponseType
: Option must be enabled on the App client, look for Allowed OAuth Flows on App client settings sub section. Authorization code grant is for 'code' value and Implicit grant is for 'token' value.
Enable sign-up, sign-in, and sign-out
Follow the instructions in the Sign in, Sign up and Sign out to learn about how to integrate these authentication flows in your application with the Auth APIs.
Summary
To implement authentication flows using Amplify you can either use the Amplify UI libraries or call authentication methods directly on the Auth
class.
Auth
has over 30 methods including signUp
, signIn
, forgotPassword
, and signOut
that allow you full control over all aspects of the user authentication flow.
Check out the complete API here.