{"id":26901618,"url":"https://github.com/luke-guan/aws-cognito-react-ui","last_synced_at":"2025-10-26T08:14:03.738Z","repository":{"id":57188195,"uuid":"295061637","full_name":"luke-guan/aws-cognito-react-ui","owner":"luke-guan","description":"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.","archived":false,"fork":false,"pushed_at":"2020-09-13T02:52:38.000Z","size":110,"stargazers_count":4,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-04T22:37:11.198Z","etag":null,"topics":["authentication","aws","aws-amplify","cognito","hooks","react","typescript","ui"],"latest_commit_sha":null,"homepage":"https://github.com/luke-guan/aws-cognito-react-ui","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/luke-guan.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-09-13T02:16:47.000Z","updated_at":"2021-08-10T13:49:55.000Z","dependencies_parsed_at":"2022-08-28T13:00:34.113Z","dependency_job_id":null,"html_url":"https://github.com/luke-guan/aws-cognito-react-ui","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luke-guan%2Faws-cognito-react-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luke-guan%2Faws-cognito-react-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luke-guan%2Faws-cognito-react-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/luke-guan%2Faws-cognito-react-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/luke-guan","download_url":"https://codeload.github.com/luke-guan/aws-cognito-react-ui/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246612494,"owners_count":20805354,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["authentication","aws","aws-amplify","cognito","hooks","react","typescript","ui"],"created_at":"2025-04-01T08:54:46.656Z","updated_at":"2025-10-26T08:14:03.624Z","avatar_url":"https://github.com/luke-guan.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# AWS Cognito React UI\n\nAWS 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).\n\n## Install\n\n```bash\nnpm install aws-cognito-react-ui # or yarn add aws-cognito-react-ui\n```\n\n## Usage\n\n##### Import Package\n\n```javascript\nimport AuthProvider from 'aws-cognito-react-ui';\n```\n\n##### Wrap your App with AuthProvider\n\nPass in your awsconfig, and wrap with AuthProvider.\n\n```javascript\nconst awsconfig = {\n    Auth: {\n        region: 'us-east-1',\n        userPoolId: 'us-east-1_ABC',\n        userPoolWebClientId: 'ABCDEFGHIJKL'\n    }\n}\n\n\u003cAuthProvider awsconfig={awsconfig}\u003e\n    \u003cMyApp /\u003e\n\u003c/AuthProvider\u003e\n```\n\nThat's it! Works out the box!\n\n---\n\n##### Customize the UX\n\nLook 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).\n\n##### Design Component Object for each screen\n\nThe 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.\n\nExample for HTML (web):\n\n```javascript\nconst LoadingUI = () =\u003e (\n    \u003cdiv\u003e\n        \u003ch1\u003eLoading\u003c/h1\u003e\n    \u003c/div\u003e\n);\n```\n\n##### Link Component to your UX\n\nReference the aws-cognito-core-ui [docs](https://github.com/luke-guan/aws-cognito-core-ui) on what is needed to contruct each component.\n\n```javascript\nconst MyScreenComponents = {\n    signInC: SignInUI,\n    errorMsgC: ErrorMsgUI,\n    forgotPasswordC: ForgotPasswordUI,\n    forgotPasswordSubmitC: ForgotPasswordSubmitUI,\n    signOutC: SignOutUI,\n    signUpC: SignUpUI,\n    confirmSignUpC: ConfirmSignUpUI,\n    confirmSignInC: ConfirmSignInUI,\n    newPasswordRequiredC: NewPasswordRequiredUI,\n    mfaSetupC: MfaSetupUI,\n    changePasswordC: ChangePasswordUI,\n    changePasswordSuccessC: ChangePasswordSuccessUI,\n    loadingC: LoadingUI,\n};\n```\n\nFeeling lazy and want to just customize the signInC components.\n\n```javascript\nimport { defaultComponentObject } from 'aws-cognito-react-ui';\nconst MyScreenComponents = {\n    ...defaultComponentObject,\n    signInC: YourSignInUI,\n};\n```\n\n##### Wrap your App with AuthProvider\n\nPass in your awsconfig, along with your screens to ComponentObject.\n\n```javascript\n\u003cAuthProvider awsconfig={awsconfig} ComponentObject={MyScreenComponents}\u003e\n    \u003cMyApp /\u003e\n\u003c/AuthProvider\u003e\n```\n\n[Create your own Package](docs/createPackage.md) with your own Design.\n\n[FAQs](docs/FAQs.md)\n\n## Support\n\nFeedback / Questions / Thoughts / Hire me?\n\n[Discord](https://discord.gg/Mfwc5sg)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluke-guan%2Faws-cognito-react-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fluke-guan%2Faws-cognito-react-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fluke-guan%2Faws-cognito-react-ui/lists"}