aws-amplify-react-custom-ui
Install
npm install --save aws-amplify-react-custom-ui
Usage
This lib help you override existing ui for amplify-react
Online Example
https://stackblitz.com/github/ysfmag/aws-amplify-react-custom-ui-example
github link : https://github.com/ysfmag/aws-amplify-react-custom-ui-example
Configuration
Somewhere in your app, preferably at the root level, configure AmplifyCustomUi .
;; // amplify config;; // amplify-Custom-ui config;; Amplify;AmplifyCustomUi; ReactDOM;
Example
You can provide custom SignIn component by using , setSignIn:
import SignIn from "./SignIn";import AmplifyCustomUi from "aws-amplify-react-custom-ui";AmplifyCustomUi;
params
withAuthenticator(Component, federated = null, theme = null) : component renders your App component after a successful user signed in, and it prevents non-sign-in uses to interact with your app. In this case, we need to display a sign-out button to trigger the related process.
configure(configuration) : configure the lib "aws-amplify-react-custom-ui" .
setSignIn(component) : to override the signIn page .
setForgotPassword(component) : to override the ForgotPassword page .
setConfirmSignUp(component) .
setVerifyContact(component) .
setSignUp(component) .
setRequireNewPassword(component) .
setConfirmSignIn(component) .
setTOTPSetup(component) .
the lib provide tow function authError , changeAuthState as props to the component , you need to use these function to notify that the authentication state had been changed , example .
App.js
import React Component from "react";import SignIn from "./SignIn";import amplifyCustomUi from "aws-amplify-react-custom-ui";import SecureApp from "./SecureApp"; { amplifyCustomUi; } { return <SecureApp />; } ;
SecureApp
import React Component from "react";import amplifyCustomUi from "aws-amplify-react-custom-ui";import Auth from "aws-amplify"; const styes = container: display: "flex" flexDirection: "column" justifyContent: "center" alignItems: "center" button: width: "200px" height: "60px" backgroundColor: "red" ; { const onStateChange = thisprops; Auth; }; { return <div => <h1> hello world </h1> <button = => sign Out </button> </div> ; } ;
SignIn
import React Component from "react";import Auth from "aws-amplify";const styles = continer: display: "flex" flexDirection: "column" justifyContent: "center" alignItems: "center" input: width: "100%" padding: "12px 20px" margin: "8px 0" display: "inline-block" border: "1px solid #ccc" borderRadius: "4px" boxSizing: "border-box" submit: width: "100%" backgroundColor: "#4CAF50" color: "white" padding: "14px 20px" margin: "8px 0" border: "none" borderRadius: "4px" cursor: "pointer" ; const updateByPropertyName = propertyName value propertyName: value; const INITIAL_STATE = email: "" password: "" error: null; { ; thisstate = ...INITIAL_STATE ; } { const changeAuthState = thisprops; ; } { const email password = thisstate; Auth ; event; }; { const email password error = thisstate; const isInvalid = password === "" || email === ""; return <div> <div => <h1>SignIn</h1> <form => <input = = = ="text" ="Email Address" /> <input = = = ="password" ="Password" /> <button = = ="submit"> Sign In </button> error && <p>errormessage</p> </form> <div> <p> No account? </p> <button = = > Create account </button> </div> </div> </div> ); }} ;
License
MIT © youssef maghzaz