https://github.com/luke-guan/aws-cognito-core-ui
AWS Cognito Core UI is a library package that allows designers to customize the UX to work with AWS Cognito.
https://github.com/luke-guan/aws-cognito-core-ui
authentication aws aws-amplify cognito hooks react typescript ui
Last synced: about 2 months ago
JSON representation
AWS Cognito Core UI is a library package that allows designers to customize the UX to work with AWS Cognito.
- Host: GitHub
- URL: https://github.com/luke-guan/aws-cognito-core-ui
- Owner: luke-guan
- License: mit
- Created: 2020-09-12T23:53:22.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-09-13T00:08:27.000Z (almost 5 years ago)
- Last Synced: 2025-04-30T22:15:57.024Z (about 2 months ago)
- Topics: authentication, aws, aws-amplify, cognito, hooks, react, typescript, ui
- Language: TypeScript
- Homepage: https://github.com/luke-guan/aws-cognito-core-ui
- Size: 129 KB
- Stars: 5
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# AWS Cognito Core UI
AWS Cognito Core UI is a library package that allows designers to customize the UX to work with AWS Cognito.
## Install
```bash
npm install aws-cognito-core-ui # or yarn add aws-cognito-core-ui
```
---
## Usage
It might be easier to use [aws-cognito-react-ui](https://github.com/luke-guan/aws-cognito-react-ui) or [aws-cognito-react-native-ui](https://github.com/luke-guan/aws-cognito-react-native-ui). Look at the those package's source code.
Create UX for each screen:
```
- SignIn
- ErrorMsg
- ForgotPassword (Type in user, to receive email code)
- ForgotPasswordSubmit (Type in newPassword and code)
- SignOut
- ConfirmSignUp (Type in code to validate user)
- ConfirmSignIn (Type in mfaCode)
- NewPasswordRequired (Setup newPassword required from Cognito)
- MfaSetup (Setup 2FA)
- ChangePassword (Change Password)
- ChangePasswordSuccess (Screen when password successful)
- Loading
```
More info can be found at [Basic Usage](docs/BasicUsage.md).
##### Import Package
```javascript
import AuthProvider from '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
);
```
Example for App (react-native):
```javascript
const LoadingUI = () => (
Loading
);
```
##### Link Component to your UX
Reference the [docs](docs/BasicUsage.md) 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,
};
```
##### Wrap your App with AuthProvider
Pass in your awsconfig, along with your screens to ComponentObject.
```javascript
```
[FAQs](docs/FAQs.md)
## Support
Feedback / Questions / Thoughts / Hire me?
[Discord](https://discord.gg/Mfwc5sg)