Cognito - React

1 - About

Aws - React and cognito is built into the auth amplify component.

3 - Prerequisites

3.1 - Installation

yarn add aws-amplify 

info All dependencies
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

yarn add aws-amplify-react 

info All dependencies
├─ [email protected]
├─ [email protected]
└─ [email protected]

3.2 - Configuration

4 - Usage

For React and React Native apps:

4.1 - User Pool

4.1.1 - React component

For the UI, see UI React components - withAuthenticator

The simplest way to add authentication flows into your app is to use the withAuthenticator Higher Order Component.

import { withAuthenticator } from 'aws-amplify-react';
export default withAuthenticator(App);

The withAuthenticator HOC wraps the Authenticator component.

Advanced: the Signature is (code)

withAuthenticator(Comp, includeGreetings = false, authenticatorComponents = [], federated = null, theme = null, signUpConfig = {})

You can then wrap it up like that if you want only three fields for the Signup

withAuthenticator(<App />, {
    federated: {
       google_client_id: "yourGoogleClientID"
    signUpConfig: {
      header: "Create a new account for nico",
      hideAllDefaults: true,
      signUpFields: [
          label: "Username",
          key: "username",
          required: true,
          placeholder: "Username",
          displayOrder: 1
          label: "Password",
          key: "password",
          required: true,
          placeholder: "Password",
          type: "password",
          displayOrder: 3
          label: "Email",
          key: "email",
          required: true,
          placeholder: "Email",
          type: "email",
          displayOrder: 2

Ref: Allow simple customization of sign-up and sign-in attributes in React Authenticator #2160

Using Authenticator directly gives you more customization options for your UI. - Authenticator

Using Authenticator gives more customization options for the UI. See doc


import { Authenticator, Greetings } from 'aws-amplify-react';

const federated = {
    google_client_id: 'yourGoogleClientID',
    facebook_app_id: 'yourFacebookClientID',
    amazon_client_id: 'yourAmazonClientID'

<Authenticator hide={[Greetings]} federated={federated}>
	<Main  />

Full options:

    // Optionally hard-code an initial state
    // Pass in an already authenticated CognitoUser or FederatedUser object
    authData={CognitoUser | 'username'} 
    // Fired when Authentication State changes
    onStateChange={(authState) => console.log(authState)} 
    // An object referencing federation and/or social providers 
    // The federation here means federation with the Cognito Identity Pool Service
    // *** Only supported on React/Web (Not React Native) ***
    // For React Native use the API Auth.federatedSignIn()
    // A theme object to override the UI / styling
    // Hide specific components within the Authenticator
    // or hide all the default components
    // Pass in an aws-exports configuration
    // Pass in a message map for error strings
    // Default components can be customized/passed in as child components. 
    // Define them here if you used hideDefault={true}
    <Greetings federated={federated}/>
    <SignIn federated={myFederatedConfig}/>
    <SignUp signUpConfig={signUpConfig}/>

4.1.2 - Hosted UI

Amplify provides a withOAuth Higher Order Component to:

  • launch the Hosted UI
  • or bypass and use the social providers directly.

4.2 - Identity Pool

Alternatively use Auth.federatedSignIn() to get AWS credentials directly from Cognito Federated Identities and not use User Pool federation. If you have logged in with Auth.signIn() you can not call Auth.federatedSignIn() as Amplify will perform this federation automatically for you in the background.

5 - Documentation / Reference

Data Science
Data Analysis
Data Science
Linear Algebra Mathematics

Powered by ComboStrap