node package manager



React AWS Cognito login component

Continuous Integration Coverage Status Downloads Version License


$ npm init
$ npm install @mitchallen/react-cognito-login --save


  1. Visit:
  2. Create a user pool
  3. Create a test user in the user pool
  4. Create a React app
  5. Paste the code below into src/App.js
  6. Create src/config.js and plug in your Cognito values for:
  • User Pool ID
  • App Client ID
  1. Run the app and login as the test user


import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

import CognitoLoginGui from '@mitchallen/react-cognito-login';

import { CognitoUserPoolId, CognitoAppClientId } from './config';

const cognitoUserPoolId = CognitoUserPoolId;
const cognitoAppClientId = CognitoAppClientId;

class App extends Component {
  constructor(props) {
    this.state = {
      isAuthenticated: false,

  userHasAuthenticated = authenticated => {
    this.setState({ isAuthenticated: authenticated });

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Login Demo</h1>
        <h4>authenticated: {this.state.isAuthenticated ? "true": "false"}</h4>
          defaultStatus='Please login'

export default App;


Substitute your pool values:

export const CognitoUserPoolId = 'us-east-1_blah-blah-blah';
export const CognitoAppClientId = '6ublahblahblahblahblahblah';

Existing Pool Option

To use an existing pool, pass in it's value instead of the id's that are needed to create one.

    defaultStatus='Please login'


Run the Tests

To test, go to the root folder and type (sans $):

$ npm test

Component Testing


If you've never installed create-react-app (you may need to use sudo):

$ npm install -g create-react-app

Create a local npm link

In the original component folder (you may need to use sudo):

$ npm link

Create a test package

Create a root test folder and then do the following:

$ create-react-app react-cognito-login-test
$ cd react-cognito-login-test
$ npm link @mitchallen/react-cognito-login

Modify src/App.js

1: Add this line near the top:

import CognitoLoginGui from '@mitchallen/react-cognito-login';

NOTE: CognitoLoginGui must be Capitalized or component won't render.

2: Somewhere in the middle of the render method add this line:

<CognitoLoginGui />

Run The Test App

$ npm start


Remember to unlink when done.



In lieu of a formal style guide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Version History

Version 0.2.4

  • Now have the option of passing in an existing CognitoUserPool

Version 0.2.3

  • changed property succcessMessage (3 c's) to successMessage (2 c's)

Version 0.2.2

Version 0.2.1

  • fixed type-o's in success message and readme

Version 0.2.0

  • Total rewrite, not compatible with older versions

Version 0.1.3

  • rebuilt before publishing

Version 0.1.2

  • Added call to props.userHasAuthenticated(true) on successful login
  • Removed call to props.updateUserToken

Version 0.1.1

  • Button reverts state when token updated

Version 0.1.0

  • initial release