@larva.io/webcomponents-cognito-login-react v4.0.3

Larva.io Amazon Cognito WebComponents React

Larva.io Amazon Cognito WebComponents can be used to easily add user sign-in to your mobile and web apps.

License: Attribution-NoDerivatives 4.0 International

Documentation

docs.larva.io

Getting started

npm install --save @larva.io/webcomponents-cognito-login-react

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import Component from './Component';
import '@larva.io/webcomponents-cognito-login-react';

ReactDOM.render(
  <React.StrictMode>
    <Component />
  </React.StrictMode>,
  document.getElementById('app')
);

Component.js

import { Component } from 'react';
import { LarCognitoLogin, LarCognitoConfig, isReady } from '@larva.io/webcomponents-cognito-login-react';

export default class Component extends Component {
    Cognito = createRef();

    constructor(props) {
        super(props);
        this.state = {
            loading: false
        };
        this.onLoading = this.onLoading.bind(this);
        this.onLoginError = this.onLoginError.bind(this);
        this.onLoginDone = this.onLoginDone.bind(this);
    }

     async componentDidMount() {
      await isReady();
    }

    onLoginError(event) {
        alert(event.detail);
    }

    async onLoginDone() {
      const token = await this.Cognito.current.getAccessToken();
      alert(`login done. Token: ${token}`);
    }

    onLoading(event) {
        this.setState({
            loading: !!event.detail
        });
    }

    render() {
        const Loading = this.state.loading ? <div>Loading...</div> : <span />;
        return (
            <div>
                <LarCognitoConfig
                  ref={this.Cognito}
                  cognito-region="eu-central-1"
                  cognito-pool-id="eu-central-xxxxx"
                  cognito-client-id="xxxxxx"
                  storage-type="local"
                />
                {Loading}
                <LarCognitoLogin onLoading={this.onLoading} onLoginDone={this.onLoginDone} onLoginError={this.onLoginError} />
            </div>
        );
    }
}