React-aws-cognito NPM

react-aws-cognito

This packages contains Higher-Order-Components which hide the implementation of using AWS-Cognito.

Simply wrap a Presentational Component with the appropriate HOC, and it will automagically work with cognito.

Set-up

Environment vars.

Add the following env vars to your application....

USER_POOL_ID=

APP_CLIENT_ID=

IDENTITY_POOL_ID=

COGNITO_REGION=

...adding values to the right side from your AWS-Cognito pool.

I personally use https://www.npmjs.com/package/webpack-dotenv-plugin to get this set up

Redux: Add Reducer to Store

Add the 'react-aws-cognito' reducer to your store.

Typically one would use combine reducers....

import {combineReducers} from 'redux'
import {reducer as cognito} from 'react-aws-cognito'
import yourAppReducer from './reducer'

const combinedReducers = combineReducers({
  cognito,
  yourAppReducer
})

export default combinedReducers

It MUST be named 'cognito' so ensure that the import stays as import {reducer as cognito} from 'react-aws-cognito'

Examples

Login

import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { asAuthenticateUserHandler } from 'react-aws-cognito'

class AuthenticateUser extends Component {
  static propTypes = {
    username: PropTypes.string.isRequired,
    password: PropTypes.string.isRequired,
    onInputChanged: PropTypes.func.isRequired,
    onSubmit: PropTypes.func.isRequired,
    isFormValid: PropTypes.bool.isRequired,
    isFetching: PropTypes.bool.isRequired,
    error: PropTypes.string.isRequired
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.onSubmit()
  }

  handleChange = event => {
    this.props.onInputChanged(event.target.id, event.target.value)
  }

  render () {
    const {username, password, isFetching, isFormValid, error} = this.props

    return (
      <div>
        <p>Login</p>
        {isFetching ? <p>Checking....</p> : null}
        {error ? <p color='danger'>{error}</p> : null}        
        <form noValidate autoComplete="off" onSubmit={this.handleSubmit}>
          <input
            id="username"
            value={username}
            onChange={this.handleChange} />

          <input
            type='password'
            id='password'
            value={password}
            onChange={this.handleChange} />

          <input type="submit" value="Submit" />
        </form>
      </div>
    )
  }
}

export default asAuthenticateUserHandler(AuthenticateUser)

App / Session

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { asSessionHandler } from 'react-aws-cognito'
import { BrowserRouter, Route, Switch } from 'react-router-dom'

class App extends Component {
  static propTypes = {
    isLoggedIn: PropTypes.bool.isRequired,
    newPasswordRequired: PropTypes.bool.isRequired,
    emailNeedsVerifying: PropTypes.bool.isRequired
  }

  render () {
    const {isLoggedIn, emailNeedsVerifying, newPasswordRequired} = this.props

    return (
      <BrowserRouter>
        <div>
          <Switch>
            ...
            ...
            ...
          </Switch>
        </div>
      </BrowserRouter>
    )
  }
}

export default asSessionHandler(App)