Cognito - Amplify Auth Component

Card Puncher Data Processing

Cognito - Amplify Auth Component

About

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

Prerequisites

Installation

  • 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 

Configuration

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';
Amplify.configure(awsmobile);

Manually

  • with Auth
import Auth from '@aws-amplify/auth';
Auth.configure(
    // 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';

Amplify.configure({
    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: '.yourdomain.com',
        // 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

https://aws-amplify.github.io/docs/js/authentication#common-authentication-use-cases

Sign-up

Add user sign up

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

Auth.signUp({
  username: 'AmandaB',
  password: 'MyCoolPassword1!',
  attributes: {
    email: '[email protected]'
  }
});

Sign-in

Sign in

Sign-out

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';


Auth.signOut()
    .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

https://aws-amplify.github.io/docs/js/authentication#common-authentication-use-cases

React

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