Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    @mitchallen/react-cognito-loginpublic

    @mitchallen/react-cognito-login

    React AWS Cognito login component

    Continuous Integration Coverage Status Downloads Version License

    Installation

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

    Usage

    1. Visit: https://aws.amazon.com/cognito/
    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

    src/App.js

    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) {
        super(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>
            </header>
            <h4>cognitoUserPoolId={cognitoUserPoolId}</h4>
            <h4>cognitoAppClientId={cognitoAppClientId}</h4>
            <h4>authenticated: {this.state.isAuthenticated ? "true": "false"}</h4>
            <CognitoLoginGui 
              defaultStatus='Please login'
              userHasAuthenticated={this.userHasAuthenticated}
              cognitoUserPoolId={cognitoUserPoolId}
              cognitoAppClientId={cognitoAppClientId}
            />
          </div>
        );
      }
    }
    
    export default App;
    
    

    src/config.js

    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.

    <CognitoLoginGui 
        defaultStatus='Please login'
        userHasAuthenticated={this.userHasAuthenticated}
        cognitoUserPool={this.state.cognitoUserPool}
    />
    

    Testing

    Run the Tests

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

    $ npm test
    

    Component Testing

    Prerequisite

    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
    

    Cleanup

    Remember to unlink when done.


    Repo(s)


    Contributing

    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

    Keywords

    none

    install

    npm i @mitchallen/react-cognito-login

    Downloadsweekly downloads

    0

    version

    0.2.4

    license

    MIT

    repository

    githubgithub

    last publish

    collaborators

    • avatar