├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── amplify ├── .config │ └── project-config.json └── backend │ ├── auth │ └── cognitocf0c6096 │ │ ├── cognitocf0c6096-cloudformation-template.yml │ │ └── parameters.json │ └── backend-config.json ├── assets ├── create-account.png ├── home.png └── signin.png ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt ├── src ├── App.test.tsx ├── App.tsx ├── index.css ├── index.tsx ├── logo.svg ├── react-app-env.d.ts ├── reportWebVitals.ts ├── setupTests.ts └── theme.ts ├── tsconfig.json └── yarn.lock /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | 25 | #amplify-do-not-edit-begin 26 | amplify/\#current-cloud-backend 27 | amplify/.config/local-* 28 | amplify/logs 29 | amplify/mock-data 30 | amplify/backend/amplify-meta.json 31 | amplify/backend/.temp 32 | build/ 33 | dist/ 34 | node_modules/ 35 | aws-exports.js 36 | awsconfiguration.json 37 | amplifyconfiguration.json 38 | amplifyconfiguration.dart 39 | amplify-build-config.json 40 | amplify-gradle-config.json 41 | amplifytools.xcconfig 42 | .secret-* 43 | **.sample 44 | #amplify-do-not-edit-end 45 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | ## Code of Conduct 2 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 3 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 4 | opensource-codeofconduct@amazon.com with any additional questions or comments. 5 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing Guidelines 2 | 3 | Thank you for your interest in contributing to our project. Whether it's a bug report, new feature, correction, or additional 4 | documentation, we greatly value feedback and contributions from our community. 5 | 6 | Please read through this document before submitting any issues or pull requests to ensure we have all the necessary 7 | information to effectively respond to your bug report or contribution. 8 | 9 | 10 | ## Reporting Bugs/Feature Requests 11 | 12 | We welcome you to use the GitHub issue tracker to report bugs or suggest features. 13 | 14 | When filing an issue, please check existing open, or recently closed, issues to make sure somebody else hasn't already 15 | reported the issue. Please try to include as much information as you can. Details like these are incredibly useful: 16 | 17 | * A reproducible test case or series of steps 18 | * The version of our code being used 19 | * Any modifications you've made relevant to the bug 20 | * Anything unusual about your environment or deployment 21 | 22 | 23 | ## Contributing via Pull Requests 24 | Contributions via pull requests are much appreciated. Before sending us a pull request, please ensure that: 25 | 26 | 1. You are working against the latest source on the *main* branch. 27 | 2. You check existing open, and recently merged, pull requests to make sure someone else hasn't addressed the problem already. 28 | 3. You open an issue to discuss any significant work - we would hate for your time to be wasted. 29 | 30 | To send us a pull request, please: 31 | 32 | 1. Fork the repository. 33 | 2. Modify the source; please focus on the specific change you are contributing. If you also reformat all the code, it will be hard for us to focus on your change. 34 | 3. Ensure local tests pass. 35 | 4. Commit to your fork using clear commit messages. 36 | 5. Send us a pull request, answering any default questions in the pull request interface. 37 | 6. Pay attention to any automated CI failures reported in the pull request, and stay involved in the conversation. 38 | 39 | GitHub provides additional document on [forking a repository](https://help.github.com/articles/fork-a-repo/) and 40 | [creating a pull request](https://help.github.com/articles/creating-a-pull-request/). 41 | 42 | 43 | ## Finding contributions to work on 44 | Looking at the existing issues is a great way to find something to contribute on. As our projects, by default, use the default GitHub issue labels (enhancement/bug/duplicate/help wanted/invalid/question/wontfix), looking at any 'help wanted' issues is a great place to start. 45 | 46 | 47 | ## Code of Conduct 48 | This project has adopted the [Amazon Open Source Code of Conduct](https://aws.github.io/code-of-conduct). 49 | For more information see the [Code of Conduct FAQ](https://aws.github.io/code-of-conduct-faq) or contact 50 | opensource-codeofconduct@amazon.com with any additional questions or comments. 51 | 52 | 53 | ## Security issue notifications 54 | If you discover a potential security issue in this project we ask that you notify AWS/Amazon Security via our [vulnerability reporting page](http://aws.amazon.com/security/vulnerability-reporting/). Please do **not** create a public github issue. 55 | 56 | 57 | ## Licensing 58 | 59 | See the [LICENSE](LICENSE) file for our project's licensing. We will ask you to confirm the licensing of your contribution. 60 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 7 | the Software, and to permit persons to whom the Software is furnished to do so. 8 | 9 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 10 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 11 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 12 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 13 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 14 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 15 | 16 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Create React App with AWS Amplify Auth using Typescript 2 | 3 | This repository is a refactor of https://github.com/aws-samples/create-react-app-auth-amplify using Typescript with some additional improvements like Amplify UI. 4 | 5 | This app implements new version of Amplify Authenticator from Amplify UI to provide a basic authentication flow for signing up and signing in users as well as protected client side routing using AWS Amplify. 6 | 7 | ## Prerequisites 8 | 9 | You should have an AWS Account ready to use and Node, npm and Amplify CLI installed. For more information, https://docs.amplify.aws/cli/start/install 10 | 11 | ## Deploy with the AWS Amplify Console 12 | 13 | The AWS Amplify Console provides hosting for fullstack serverless web apps. Deploy this app to your AWS account with a single click: 14 | 15 | [![amplifybutton](https://oneclick.amplifyapp.com/button.svg)](https://console.aws.amazon.com/amplify/home#/deploy?repo=https://github.com/aws-samples/create-react-app-amplify-auth-typescript) 16 | 17 | The Amplify Console will fork this repo in your GitHub account, and then build and deploy your backend and frontend in a single workflow. Your app will be available at `https://main.appid.amplifyapp.com`. 18 | 19 | ## Preview 20 | 21 | 22 | 23 | 24 | 25 | ## Run locally with the Amplify CLI 26 | 27 | 1. Fork the repo in your account and then clone it as below. 28 | 29 | ``` 30 | git clone https://github.com//create-react-app-amplify-auth-typescript.git 31 | cd create-react-app-amplify-auth-typescript 32 | yarn install 33 | ``` 34 | 35 | 2. Pull backend from AWS Amplify using appid and envname which can be found on AWS Amplify UI. 36 | 37 | ``` 38 | amplify pull --appId appid --envName envname 39 | ``` 40 | 41 | 3. Run locally 42 | 43 | ``` 44 | yarn start 45 | ``` 46 | -------------------------------------------------------------------------------- /amplify/.config/project-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "projectName": "authcra", 3 | "version": "1.0", 4 | "frontend": "javascript", 5 | "javascript": { 6 | "framework": "react", 7 | "config": { 8 | "SourceDir": "src", 9 | "DistributionDir": "build", 10 | "BuildCommand": "npm run-script build", 11 | "StartCommand": "npm run-script start" 12 | } 13 | }, 14 | "providers": [ 15 | "awscloudformation" 16 | ] 17 | } -------------------------------------------------------------------------------- /amplify/backend/auth/cognitocf0c6096/cognitocf0c6096-cloudformation-template.yml: -------------------------------------------------------------------------------- 1 | AWSTemplateFormatVersion: 2010-09-09 2 | 3 | Parameters: 4 | env: 5 | Type: String 6 | authRoleName: 7 | Type: String 8 | unauthRoleName: 9 | Type: String 10 | authRoleArn: 11 | Type: String 12 | unauthRoleArn: 13 | Type: String 14 | 15 | 16 | identityPoolName: 17 | Type: String 18 | 19 | allowUnauthenticatedIdentities: 20 | Type: String 21 | 22 | thirdPartyAuth: 23 | Type: String 24 | 25 | lambdaLogPolicy: 26 | Type: String 27 | 28 | openIdLambdaRoleName: 29 | Type: String 30 | 31 | openIdRolePolicy: 32 | Type: String 33 | 34 | openIdLambdaIAMPolicy: 35 | Type: String 36 | 37 | openIdLogPolicy: 38 | Type: String 39 | 40 | userPoolName: 41 | Type: String 42 | 43 | autoVerifiedAttributes: 44 | Type: CommaDelimitedList 45 | 46 | mfaConfiguration: 47 | Type: String 48 | 49 | mfaTypes: 50 | Type: CommaDelimitedList 51 | 52 | roleName: 53 | Type: String 54 | 55 | roleExternalId: 56 | Type: String 57 | 58 | policyName: 59 | Type: String 60 | 61 | smsAuthenticationMessage: 62 | Type: String 63 | 64 | smsVerificationMessage: 65 | Type: String 66 | 67 | emailVerificationSubject: 68 | Type: String 69 | 70 | emailVerificationMessage: 71 | Type: String 72 | 73 | defaultPasswordPolicy: 74 | Type: String 75 | 76 | passwordPolicyMinLength: 77 | Type: Number 78 | 79 | passwordPolicyCharacters: 80 | Type: CommaDelimitedList 81 | 82 | requiredAttributes: 83 | Type: CommaDelimitedList 84 | 85 | userpoolClientName: 86 | Type: String 87 | 88 | userpoolClientGenerateSecret: 89 | Type: String 90 | 91 | userpoolClientRefreshTokenValidity: 92 | Type: Number 93 | 94 | userpoolClientReadAttributes: 95 | Type: CommaDelimitedList 96 | 97 | mfaLambdaRole: 98 | Type: String 99 | 100 | mfaLambdaLogPolicy: 101 | Type: String 102 | 103 | mfaPassRolePolicy: 104 | Type: String 105 | 106 | mfaLambdaIAMPolicy: 107 | Type: String 108 | 109 | userpoolClientLambdaRole: 110 | Type: String 111 | 112 | userpoolClientLogPolicy: 113 | Type: String 114 | 115 | userpoolClientLambdaPolicy: 116 | Type: String 117 | 118 | userpoolClientSetAttributes: 119 | Type: String 120 | 121 | useDefault: 122 | Type: String 123 | 124 | resourceName: 125 | Type: String 126 | 127 | authSelections: 128 | Type: String 129 | 130 | Conditions: 131 | ShouldNotCreateEnvResources: !Equals [ !Ref env, NONE ] 132 | 133 | Resources: 134 | 135 | # BEGIN SNS ROLE RESOURCE 136 | SNSRole: 137 | # Created to allow the UserPool SMS Config to publish via the Simple Notification Service during MFA Process 138 | Type: AWS::IAM::Role 139 | Properties: 140 | RoleName: !If [ShouldNotCreateEnvResources, !Ref roleName, !Join ['',[!Ref roleName, '-', !Ref env]]] 141 | AssumeRolePolicyDocument: 142 | Version: "2012-10-17" 143 | Statement: 144 | - Sid: "" 145 | Effect: "Allow" 146 | Principal: 147 | Service: "cognito-idp.amazonaws.com" 148 | Action: 149 | - "sts:AssumeRole" 150 | Condition: 151 | StringEquals: 152 | sts:ExternalId: !Ref roleExternalId 153 | Policies: 154 | - 155 | PolicyName: !Ref policyName 156 | PolicyDocument: 157 | Version: "2012-10-17" 158 | Statement: 159 | - 160 | Effect: "Allow" 161 | Action: 162 | - "sns:Publish" 163 | Resource: "*" 164 | # BEGIN USER POOL RESOURCES 165 | UserPool: 166 | # Created upon user selection 167 | # Depends on SNS Role for Arn if MFA is enabled 168 | Type: AWS::Cognito::UserPool 169 | Properties: 170 | UserPoolName: !If [ShouldNotCreateEnvResources, !Ref userPoolName, !Join ['',[!Ref userPoolName, '-', !Ref env]]] 171 | Schema: 172 | 173 | - 174 | Name: email 175 | Required: true 176 | Mutable: true 177 | 178 | 179 | AutoVerifiedAttributes: !Ref autoVerifiedAttributes 180 | 181 | 182 | EmailVerificationMessage: !Ref emailVerificationMessage 183 | EmailVerificationSubject: !Ref emailVerificationSubject 184 | 185 | Policies: 186 | PasswordPolicy: 187 | MinimumLength: !Ref passwordPolicyMinLength 188 | RequireLowercase: true 189 | RequireNumbers: true 190 | RequireSymbols: true 191 | RequireUppercase: true 192 | MfaConfiguration: !Ref mfaConfiguration 193 | SmsVerificationMessage: !Ref smsVerificationMessage 194 | SmsConfiguration: 195 | SnsCallerArn: !GetAtt SNSRole.Arn 196 | ExternalId: !Ref roleExternalId 197 | 198 | UserPoolClientWeb: 199 | # Created provide application access to user pool 200 | # Depends on UserPool for ID reference 201 | Type: "AWS::Cognito::UserPoolClient" 202 | Properties: 203 | ClientName: cognitocf0c6096_app_clientWeb 204 | 205 | RefreshTokenValidity: !Ref userpoolClientRefreshTokenValidity 206 | UserPoolId: !Ref UserPool 207 | DependsOn: UserPool 208 | UserPoolClient: 209 | # Created provide application access to user pool 210 | # Depends on UserPool for ID reference 211 | Type: "AWS::Cognito::UserPoolClient" 212 | Properties: 213 | ClientName: !Ref userpoolClientName 214 | 215 | GenerateSecret: !Ref userpoolClientGenerateSecret 216 | RefreshTokenValidity: !Ref userpoolClientRefreshTokenValidity 217 | UserPoolId: !Ref UserPool 218 | DependsOn: UserPool 219 | # BEGIN USER POOL LAMBDA RESOURCES 220 | UserPoolClientRole: 221 | # Created to execute Lambda which gets userpool app client config values 222 | Type: 'AWS::IAM::Role' 223 | Properties: 224 | RoleName: !If [ShouldNotCreateEnvResources, !Ref userpoolClientLambdaRole, !Join ['',[!Ref userpoolClientLambdaRole, '-', !Ref env]]] 225 | AssumeRolePolicyDocument: 226 | Version: '2012-10-17' 227 | Statement: 228 | - Effect: Allow 229 | Principal: 230 | Service: 231 | - lambda.amazonaws.com 232 | Action: 233 | - 'sts:AssumeRole' 234 | DependsOn: UserPoolClient 235 | UserPoolClientLambda: 236 | # Lambda which gets userpool app client config values 237 | # Depends on UserPool for id 238 | # Depends on UserPoolClientRole for role ARN 239 | Type: 'AWS::Lambda::Function' 240 | Properties: 241 | Code: 242 | ZipFile: !Join 243 | - |+ 244 | - - 'const response = require(''cfn-response'');' 245 | - 'const aws = require(''aws-sdk'');' 246 | - 'const identity = new aws.CognitoIdentityServiceProvider();' 247 | - 'exports.handler = (event, context, callback) => {' 248 | - ' if (event.RequestType == ''Delete'') { ' 249 | - ' response.send(event, context, response.SUCCESS, {})' 250 | - ' }' 251 | - ' if (event.RequestType == ''Update'' || event.RequestType == ''Create'') {' 252 | - ' const params = {' 253 | - ' ClientId: event.ResourceProperties.clientId,' 254 | - ' UserPoolId: event.ResourceProperties.userpoolId' 255 | - ' };' 256 | - ' identity.describeUserPoolClient(params).promise()' 257 | - ' .then((res) => {' 258 | - ' response.send(event, context, response.SUCCESS, {''appSecret'': res.UserPoolClient.ClientSecret});' 259 | - ' })' 260 | - ' .catch((err) => {' 261 | - ' response.send(event, context, response.FAILURE, {err});' 262 | - ' });' 263 | - ' }' 264 | - '};' 265 | Handler: index.handler 266 | Runtime: nodejs12.x 267 | Timeout: '300' 268 | Role: !GetAtt 269 | - UserPoolClientRole 270 | - Arn 271 | DependsOn: UserPoolClientRole 272 | UserPoolClientLambdaPolicy: 273 | # Sets userpool policy for the role that executes the Userpool Client Lambda 274 | # Depends on UserPool for Arn 275 | # Marked as depending on UserPoolClientRole for easier to understand CFN sequencing 276 | Type: 'AWS::IAM::Policy' 277 | Properties: 278 | PolicyName: !Ref userpoolClientLambdaPolicy 279 | Roles: 280 | - !If [ShouldNotCreateEnvResources, !Ref userpoolClientLambdaRole, !Join ['',[!Ref userpoolClientLambdaRole, '-', !Ref env]]] 281 | PolicyDocument: 282 | Version: '2012-10-17' 283 | Statement: 284 | - Effect: Allow 285 | Action: 286 | - 'cognito-idp:DescribeUserPoolClient' 287 | Resource: !GetAtt UserPool.Arn 288 | DependsOn: UserPoolClientLambda 289 | UserPoolClientLogPolicy: 290 | # Sets log policy for the role that executes the Userpool Client Lambda 291 | # Depends on UserPool for Arn 292 | # Marked as depending on UserPoolClientLambdaPolicy for easier to understand CFN sequencing 293 | Type: 'AWS::IAM::Policy' 294 | Properties: 295 | PolicyName: !Ref userpoolClientLogPolicy 296 | Roles: 297 | - !If [ShouldNotCreateEnvResources, !Ref userpoolClientLambdaRole, !Join ['',[!Ref userpoolClientLambdaRole, '-', !Ref env]]] 298 | PolicyDocument: 299 | Version: 2012-10-17 300 | Statement: 301 | - Effect: Allow 302 | Action: 303 | - 'logs:CreateLogGroup' 304 | - 'logs:CreateLogStream' 305 | - 'logs:PutLogEvents' 306 | Resource: !Sub 307 | - arn:aws:logs:${region}:${account}:log-group:/aws/lambda/${lambda}:log-stream:* 308 | - { region: !Ref "AWS::Region", account: !Ref "AWS::AccountId", lambda: !Ref UserPoolClientLambda} 309 | DependsOn: UserPoolClientLambdaPolicy 310 | UserPoolClientInputs: 311 | # Values passed to Userpool client Lambda 312 | # Depends on UserPool for Id 313 | # Depends on UserPoolClient for Id 314 | # Marked as depending on UserPoolClientLambdaPolicy for easier to understand CFN sequencing 315 | Type: 'Custom::LambdaCallout' 316 | Properties: 317 | ServiceToken: !GetAtt UserPoolClientLambda.Arn 318 | clientId: !Ref UserPoolClient 319 | userpoolId: !Ref UserPool 320 | DependsOn: UserPoolClientLogPolicy 321 | 322 | 323 | # BEGIN IDENTITY POOL RESOURCES 324 | 325 | 326 | IdentityPool: 327 | # Always created 328 | Type: AWS::Cognito::IdentityPool 329 | Properties: 330 | IdentityPoolName: !If [ShouldNotCreateEnvResources, 'cognitocf0c6096_identitypool_cf0c6096', !Join ['',['cognitocf0c6096_identitypool_cf0c6096', '__', !Ref env]]] 331 | 332 | CognitoIdentityProviders: 333 | - ClientId: !Ref UserPoolClient 334 | ProviderName: !Sub 335 | - cognito-idp.${region}.amazonaws.com/${client} 336 | - { region: !Ref "AWS::Region", client: !Ref UserPool} 337 | - ClientId: !Ref UserPoolClientWeb 338 | ProviderName: !Sub 339 | - cognito-idp.${region}.amazonaws.com/${client} 340 | - { region: !Ref "AWS::Region", client: !Ref UserPool} 341 | 342 | AllowUnauthenticatedIdentities: !Ref allowUnauthenticatedIdentities 343 | 344 | 345 | DependsOn: UserPoolClientInputs 346 | 347 | 348 | IdentityPoolRoleMap: 349 | # Created to map Auth and Unauth roles to the identity pool 350 | # Depends on Identity Pool for ID ref 351 | Type: AWS::Cognito::IdentityPoolRoleAttachment 352 | Properties: 353 | IdentityPoolId: !Ref IdentityPool 354 | Roles: 355 | unauthenticated: !Ref unauthRoleArn 356 | authenticated: !Ref authRoleArn 357 | DependsOn: IdentityPool 358 | 359 | 360 | Outputs : 361 | 362 | IdentityPoolId: 363 | Value: !Ref 'IdentityPool' 364 | Description: Id for the identity pool 365 | IdentityPoolName: 366 | Value: !GetAtt IdentityPool.Name 367 | 368 | 369 | UserPoolId: 370 | Value: !Ref 'UserPool' 371 | Description: Id for the user pool 372 | UserPoolName: 373 | Value: !Ref userPoolName 374 | AppClientIDWeb: 375 | Value: !Ref 'UserPoolClientWeb' 376 | Description: The user pool app client id for web 377 | AppClientID: 378 | Value: !Ref 'UserPoolClient' 379 | Description: The user pool app client id 380 | AppClientSecret: 381 | Value: !GetAtt UserPoolClientInputs.appSecret 382 | 383 | 384 | 385 | 386 | 387 | 388 | -------------------------------------------------------------------------------- /amplify/backend/auth/cognitocf0c6096/parameters.json: -------------------------------------------------------------------------------- 1 | { 2 | "identityPoolName": "cognitocf0c6096_identitypool_cf0c6096", 3 | "allowUnauthenticatedIdentities": false, 4 | "thirdPartyAuth": false, 5 | "lambdaLogPolicy": "cognitocf0c6096_lambda_log_policy", 6 | "openIdLambdaRoleName": "cognitocf0c6096_openid_lambda_role", 7 | "openIdRolePolicy": "cognitocf0c6096_openid_pass_role_policy", 8 | "openIdLambdaIAMPolicy": "cognitocf0c6096_openid_lambda_iam_policy", 9 | "openIdLogPolicy": "cognitocf0c6096_openid_lambda_log_policy", 10 | "userPoolName": "cognitocf0c6096_userpool_cf0c6096", 11 | "autoVerifiedAttributes": [ 12 | "email" 13 | ], 14 | "mfaConfiguration": "OFF", 15 | "mfaTypes": [ 16 | "SMS Text Message" 17 | ], 18 | "roleName": "cognitocf0c6096_sns-role", 19 | "roleExternalId": "cognitocf0c6096_role_external_id", 20 | "policyName": "cognitocf0c6096-sns-policy", 21 | "smsAuthenticationMessage": "Your authentication code is {####}", 22 | "smsVerificationMessage": "Your verification code is {####}", 23 | "emailVerificationSubject": "Your verification code", 24 | "emailVerificationMessage": "Your verification code is {####}", 25 | "defaultPasswordPolicy": false, 26 | "passwordPolicyMinLength": 8, 27 | "passwordPolicyCharacters": [ 28 | "Requires Lowercase", 29 | "Requires Uppercase", 30 | "Requires Numbers", 31 | "Requires Symbols" 32 | ], 33 | "requiredAttributes": [ 34 | "email" 35 | ], 36 | "userpoolClientName": "cognitocf0c6096_app_client", 37 | "userpoolClientGenerateSecret": true, 38 | "userpoolClientRefreshTokenValidity": 30, 39 | "userpoolClientReadAttributes": [ 40 | "email" 41 | ], 42 | "mfaLambdaRole": "cognitocf0c6096_totp_lambda_role", 43 | "mfaLambdaLogPolicy": "cognitocf0c6096_totp_lambda_log_policy", 44 | "mfaPassRolePolicy": "cognitocf0c6096_totp_pass_role_policy", 45 | "mfaLambdaIAMPolicy": "cognitocf0c6096_totp_lambda_iam_policy", 46 | "userpoolClientLambdaRole": "cognitocf0c6096_userpoolclient_lambda_role", 47 | "userpoolClientLogPolicy": "cognitocf0c6096_userpoolclient_lambda_log_policy", 48 | "userpoolClientLambdaPolicy": "cognitocf0c6096_userpoolclient_lambda_iam_policy", 49 | "userpoolClientSetAttributes": false, 50 | "useDefault": "default", 51 | "resourceName": "cognitocf0c6096", 52 | "authSelections": "identityPoolAndUserPool", 53 | "authRoleName": { 54 | "Ref": "AuthRoleName" 55 | }, 56 | "unauthRoleName": { 57 | "Ref": "UnauthRoleName" 58 | }, 59 | "authRoleArn": { 60 | "Fn::GetAtt": [ 61 | "AuthRole", 62 | "Arn" 63 | ] 64 | }, 65 | "unauthRoleArn": { 66 | "Fn::GetAtt": [ 67 | "UnauthRole", 68 | "Arn" 69 | ] 70 | } 71 | } -------------------------------------------------------------------------------- /amplify/backend/backend-config.json: -------------------------------------------------------------------------------- 1 | { 2 | "auth": { 3 | "cognitocf0c6096": { 4 | "service": "Cognito", 5 | "providerPlugin": "awscloudformation" 6 | } 7 | } 8 | } -------------------------------------------------------------------------------- /assets/create-account.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/create-react-app-amplify-auth-typescript/e584cc871b3c9f4a8136ce0a99546e4021cf297d/assets/create-account.png -------------------------------------------------------------------------------- /assets/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/create-react-app-amplify-auth-typescript/e584cc871b3c9f4a8136ce0a99546e4021cf297d/assets/home.png -------------------------------------------------------------------------------- /assets/signin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/create-react-app-amplify-auth-typescript/e584cc871b3c9f4a8136ce0a99546e4021cf297d/assets/signin.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "create-react-app-amplify-auth-typescript", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@aws-amplify/ui-react": "^2.10.0", 7 | "@testing-library/jest-dom": "^5.16.2", 8 | "@testing-library/react": "^12.1.2", 9 | "@testing-library/user-event": "^13.5.0", 10 | "@types/jest": "^27.4.0", 11 | "@types/node": "^16.11.24", 12 | "@types/react": "^17.0.39", 13 | "@types/react-dom": "^17.0.11", 14 | "aws-amplify": "^4.3.14", 15 | "react": "^17.0.2", 16 | "react-dom": "^17.0.2", 17 | "react-scripts": "5.0.0", 18 | "typescript": "^4.5.5", 19 | "web-vitals": "^2.1.4" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": [ 29 | "react-app", 30 | "react-app/jest" 31 | ] 32 | }, 33 | "browserslist": { 34 | "production": [ 35 | ">0.2%", 36 | "not dead", 37 | "not op_mini all" 38 | ], 39 | "development": [ 40 | "last 1 chrome version", 41 | "last 1 firefox version", 42 | "last 1 safari version" 43 | ] 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/create-react-app-amplify-auth-typescript/e584cc871b3c9f4a8136ce0a99546e4021cf297d/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/create-react-app-amplify-auth-typescript/e584cc871b3c9f4a8136ce0a99546e4021cf297d/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aws-samples/create-react-app-amplify-auth-typescript/e584cc871b3c9f4a8136ce0a99546e4021cf297d/public/logo512.png -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.test.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render, screen } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | render(); 7 | const linkElement = screen.getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Amplify } from "aws-amplify"; 3 | import { 4 | AmplifyProvider, 5 | Authenticator, 6 | Button, 7 | Flex, 8 | Image, 9 | Text, 10 | View, 11 | } from "@aws-amplify/ui-react"; 12 | import aws_exports from "./aws-exports"; 13 | 14 | import "@aws-amplify/ui-react/styles.css"; 15 | import theme from "./theme"; 16 | import logo from "./logo.svg"; 17 | 18 | Amplify.configure(aws_exports); 19 | 20 | const App = () => { 21 | return ( 22 | 23 | 24 | {({ signOut, user }) => ( 25 | 34 | 35 | logo 36 | 37 | 38 | {user && ( 39 | 40 | Hello {user.username} 41 | 44 | 45 | )} 46 | 47 | 48 | 49 | Edit src/App.tsx and save to reload. 50 | 51 | 52 | 53 | )} 54 | 55 | 56 | ); 57 | }; 58 | 59 | export default App; 60 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /src/index.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | document.getElementById('root') 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/react-app-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/reportWebVitals.ts: -------------------------------------------------------------------------------- 1 | import { ReportHandler } from 'web-vitals'; 2 | 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => { 4 | if (onPerfEntry && onPerfEntry instanceof Function) { 5 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 6 | getCLS(onPerfEntry); 7 | getFID(onPerfEntry); 8 | getFCP(onPerfEntry); 9 | getLCP(onPerfEntry); 10 | getTTFB(onPerfEntry); 11 | }); 12 | } 13 | }; 14 | 15 | export default reportWebVitals; 16 | -------------------------------------------------------------------------------- /src/setupTests.ts: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /src/theme.ts: -------------------------------------------------------------------------------- 1 | import { Theme } from "@aws-amplify/ui-react"; 2 | 3 | const theme: Theme = { 4 | name: "cra-my-theme", 5 | tokens: { 6 | colors: { 7 | font: { 8 | primary: { value: "#008080" }, 9 | }, 10 | }, 11 | }, 12 | }; 13 | 14 | export default theme; 15 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "esModuleInterop": true, 12 | "allowSyntheticDefaultImports": true, 13 | "strict": true, 14 | "forceConsistentCasingInFileNames": true, 15 | "noFallthroughCasesInSwitch": true, 16 | "module": "esnext", 17 | "moduleResolution": "node", 18 | "resolveJsonModule": true, 19 | "isolatedModules": true, 20 | "noEmit": true, 21 | "jsx": "react-jsx" 22 | }, 23 | "include": [ 24 | "src" 25 | ] 26 | } 27 | --------------------------------------------------------------------------------