Cognito - React

> AWS (Amazon Web Services) > Aws - Cognito

1 - About

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

Advertising

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

4.1.1.1 - 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.

Advertising
4.1.1.2 - Authenticator

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

Example:

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  />
</Authenticator>

Full options:

<Authenticator 
    // Optionally hard-code an initial state
    authState="signIn"
    // 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()
    federated={myFederatedConfig}
    // A theme object to override the UI / styling
    theme={myCustomTheme} 
    // Hide specific components within the Authenticator
    hide={ 
        [
            Greetings,
            SignIn,
            ConfirmSignIn,
            RequireNewPassword,
            SignUp,
            ConfirmSignUp,
            VerifyContact,
            ForgotPassword,
            TOTPSetup,
            Loading
        ]
    }
    // or hide all the default components
    hideDefault={true}
    // Pass in an aws-exports configuration
    amplifyConfig={myAWSExports}
    // Pass in a message map for error strings
    errorMessage={myMessageMap}
>
    // Default components can be customized/passed in as child components. 
    // Define them here if you used hideDefault={true}
    <Greetings federated={federated}/>
    <SignIn federated={myFederatedConfig}/>
    <ConfirmSignIn/>
    <RequireNewPassword/>
    <SignUp signUpConfig={signUpConfig}/>
    <ConfirmSignUp/>
    <VerifyContact/>
    <ForgotPassword/>
    <TOTPSetup/>
    <Loading/>
</Authenticator>

4.1.2 - Hosted UI

Amplify provides a withOAuth Higher Order Component to:

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

Advertising
aws/cognito/react.txt · Last modified: 2019/06/07 10:37 by gerardnico