@larva.io/webcomponents-cognito-login-react
v4.0.3
Published
React specific wrapper for @larva.io/webcomponents-cognito-login
Downloads
20
Readme
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
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>
);
}
}