https://github.com/luke-guan/aws-cognito-react-ui
AWS Cognito React UI is a react (web) package that allows designers to customize the UX to work with AWS Cognito. Build upon aws-cognito-core-ui.
https://github.com/luke-guan/aws-cognito-react-ui
authentication aws aws-amplify cognito hooks react typescript ui
Last synced: 8 months ago
JSON representation
AWS Cognito React UI is a react (web) package that allows designers to customize the UX to work with AWS Cognito. Build upon aws-cognito-core-ui.
- Host: GitHub
- URL: https://github.com/luke-guan/aws-cognito-react-ui
- Owner: luke-guan
- License: mit
- Created: 2020-09-13T02:16:47.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-09-13T02:52:38.000Z (almost 6 years ago)
- Last Synced: 2025-03-04T22:37:11.198Z (over 1 year ago)
- Topics: authentication, aws, aws-amplify, cognito, hooks, react, typescript, ui
- Language: TypeScript
- Homepage: https://github.com/luke-guan/aws-cognito-react-ui
- Size: 107 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# AWS Cognito React UI
AWS Cognito React UI is a react (web) package that allows designers to customize the UX to work with AWS Cognito. Build upon [aws-cognito-core-ui](https://github.com/luke-guan/aws-cognito-core-ui).
## Install
```bash
npm install aws-cognito-react-ui # or yarn add aws-cognito-react-ui
```
## Usage
##### Import Package
```javascript
import AuthProvider from 'aws-cognito-react-ui';
```
##### Wrap your App with AuthProvider
Pass in your awsconfig, and wrap with AuthProvider.
```javascript
const awsconfig = {
Auth: {
region: 'us-east-1',
userPoolId: 'us-east-1_ABC',
userPoolWebClientId: 'ABCDEFGHIJKL'
}
}
```
That's it! Works out the box!
---
##### Customize the UX
Look at the the source [code](src/auth-ui) or look at aws-cognito-core-ui [Basic Usage](https://github.com/luke-guan/aws-cognito-core-ui).
##### Design Component Object for each screen
The object keys end in C, (leave alone), the value on the right should point to your UX screen. In this case we are creating the LoadingUI.
Example for HTML (web):
```javascript
const LoadingUI = () => (
Loading
);
```
##### Link Component to your UX
Reference the aws-cognito-core-ui [docs](https://github.com/luke-guan/aws-cognito-core-ui) on what is needed to contruct each component.
```javascript
const MyScreenComponents = {
signInC: SignInUI,
errorMsgC: ErrorMsgUI,
forgotPasswordC: ForgotPasswordUI,
forgotPasswordSubmitC: ForgotPasswordSubmitUI,
signOutC: SignOutUI,
signUpC: SignUpUI,
confirmSignUpC: ConfirmSignUpUI,
confirmSignInC: ConfirmSignInUI,
newPasswordRequiredC: NewPasswordRequiredUI,
mfaSetupC: MfaSetupUI,
changePasswordC: ChangePasswordUI,
changePasswordSuccessC: ChangePasswordSuccessUI,
loadingC: LoadingUI,
};
```
Feeling lazy and want to just customize the signInC components.
```javascript
import { defaultComponentObject } from 'aws-cognito-react-ui';
const MyScreenComponents = {
...defaultComponentObject,
signInC: YourSignInUI,
};
```
##### Wrap your App with AuthProvider
Pass in your awsconfig, along with your screens to ComponentObject.
```javascript
```
[Create your own Package](docs/createPackage.md) with your own Design.
[FAQs](docs/FAQs.md)
## Support
Feedback / Questions / Thoughts / Hire me?
[Discord](https://discord.gg/Mfwc5sg)