Cognito - Amplify Auth Component

Card Puncher Data Processing


Auth is a sub-component (called a category) of the amplify library and is a wrapper around amazon-cognito-identity-js



  • If you only need to use Auth component of amplify
yarn add @aws-amplify/auth
# with npm
npm install @aws-amplify/auth
info All dependencies
├─ @aws-amplify/[email protected]
├─ @aws-amplify/[email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
└─ [email protected]

yarn add aws-amplify 


In the app (preferably at the root level), configure Amplify. More amplify configuration

With the Cli

amplify add auth
amplify push
import Amplify, { Auth } from 'aws-amplify';
import awsmobile from './aws-exports';


  • with Auth
import Auth from '@aws-amplify/auth';
    // Se below for a full list of properties
    identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
    region: 'XX-XXXX-X',

// You can get the current config object
const currentConfig = Auth.configure();
  • or with the Amplify object
import Amplify from '@aws-amplify/core';
// or 
// import Amplify from 'aws-amplify';

    Auth: {

        // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
        identityPoolId: 'XX-XXXX-X:XXXXXXXX-XXXX-1234-abcd-1234567890ab',
        // REQUIRED - Amazon Cognito Region
        region: 'XX-XXXX-X',

        // OPTIONAL - Amazon Cognito Federated Identity Pool Region 
        // Required only if it's different from Amazon Cognito Region
        identityPoolRegion: 'XX-XXXX-X',

        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'XX-XXXX-X_abcd1234',

        // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: 'a1b2c3d4e5f6g7h8i9j0k1l2m3',

        // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
        mandatorySignIn: false,

        // OPTIONAL - Configuration for cookie storage
        // Note: if the secure flag is set to true, then the cookie transmission requires a secure protocol
        cookieStorage: {
        // REQUIRED - Cookie domain (only required if cookieStorage is provided)
            domain: '',
        // OPTIONAL - Cookie path
            path: '/',
        // OPTIONAL - Cookie expiration in days
            expires: 365,
        // OPTIONAL - Cookie secure flag
        // Either true or false, indicating if the cookie transmission requires a secure protocol (https).
            secure: true

        // OPTIONAL - customized storage object
        storage: new MyStorage(),
        // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
        authenticationFlowType: 'USER_PASSWORD_AUTH'

Use case


Add user sign up

import Auth from '@aws-amplify/auth';

  username: 'AmandaB',
  password: 'MyCoolPassword1!',
  attributes: {
    email: '[email protected]'


Sign in


Cognito - Sign-out

// With only the auth module
import Auth from '@aws-amplify/auth';
// or by using the bundled amplify
// import { Auth } from 'aws-amplify';

    .then(data => console.log(data))
    .catch(err => console.log(err));

// By doing this, you are revoking all the auth tokens(id token, access token and refresh token)
// which means the user is signed out from all the devices
// Note: although the tokens are revoked, the AWS credentials will remain valid until they expire (which by default is 1 hour)
Auth.signOut({ global: true })
    .then(data => console.log(data))
    .catch(err => console.log(err));

Token Storage


See Cognito - React

Documentation / Reference

Discover More
Card Puncher Data Processing
Amplify - Javascript Library

The javascript amplify library In the app (preferably at the root level), configure Amplify. where: aws-exports is a configuration file created using the cli. See aws-exports AWS Amplify...
Card Puncher Data Processing
Cognito - Javascript Identity Sdk (amazon-cognito-identity-js)

The Cognito Javascript Sdk is one of the Cognito Sdk amplify SDK the auth amplify library Before: aws/amazon-cognito-identity-js. After: aws-amplify/amplify-js/tree/master/packages/amazon-cognito-identity-js...
Card Puncher Data Processing
Cognito - React

and cognito is built into the auth amplify component. See For React and React Native apps: For the UI, see UI React components The simplest way to add authentication flows into your...
Card Puncher Data Processing
Cognito - Sdk

AWS javascript SDK in the context of Cognito When reading Amazon Cognito documentation, a reminder that Cognito API offers two type of functions: The core library (that enable to interact with the...
Cognito Js Auth Sign Up
Cognito - Sign-Up

aws amplify sign-up The Auth.signUp promise returns a data object of type ISignUpResult with a CognitoUser. The hosted sign up forms of...
Cognito Js Auth Sign In
Cognito - Sign-in

The sign-in state After users have a confirmed account, they will be able to sign in: They gives their username (or email) and password. On internet,: a JavaScript function then communicates with...
Card Puncher Data Processing
Cognito - UI

UI forms in Cognito To reduce the operational overhead of creating and maintaining forms and custom logic for authentication, Cognito has a hosted-UI that leverages pages for: sign-up, sign-in,...

Share this page:
Follow us:
Task Runner