{"id":16446122,"url":"https://github.com/mschaeffner/react-cognito-demo","last_synced_at":"2026-03-04T05:02:48.446Z","repository":{"id":93436078,"uuid":"164736679","full_name":"mschaeffner/react-cognito-demo","owner":"mschaeffner","description":null,"archived":false,"fork":false,"pushed_at":"2019-01-08T22:22:29.000Z","size":281,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-26T10:15:38.410Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mschaeffner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-01-08T21:34:16.000Z","updated_at":"2019-01-08T22:22:30.000Z","dependencies_parsed_at":"2023-04-02T12:49:09.870Z","dependency_job_id":null,"html_url":"https://github.com/mschaeffner/react-cognito-demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mschaeffner/react-cognito-demo","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mschaeffner%2Freact-cognito-demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mschaeffner%2Freact-cognito-demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mschaeffner%2Freact-cognito-demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mschaeffner%2Freact-cognito-demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mschaeffner","download_url":"https://codeload.github.com/mschaeffner/react-cognito-demo/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mschaeffner%2Freact-cognito-demo/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30071898,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T03:25:38.285Z","status":"ssl_error","status_checked_at":"2026-03-04T03:25:05.086Z","response_time":59,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-10-11T09:46:30.863Z","updated_at":"2026-03-04T05:02:48.408Z","avatar_url":"https://github.com/mschaeffner.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Demo using AWS Cognito with a React webapp\n\n## Set up AWS Cognito\n\n### Install AWS CLI\n`sudo pip install awscli`\nor\n`brew install awscli`\n\n### Set up AWS access key and secret\n`aws configure`\n\n### Install Serverless framework\n`npm install serverless -g`\n\n### Create a new Serverless project\n```\nserverless install --url https://github.com/AnomalyInnovations/serverless-nodejs-starter --name react-cognito-demo-backend\ncd react-cognito-demo-backend\nnpm install\n```\n\n### Add the user pool config\nCreate a new file _cognito-user-pool.yml_ with following content:\n```\nResources:\n  CognitoUserPool:\n    Type: AWS::Cognito::UserPool\n    Properties:\n      # Generate a name based on the stage\n      UserPoolName: dev-user-pool\n      # Set email as an alias\n      UsernameAttributes:\n        - email\n      AutoVerifiedAttributes:\n        - email\n\n  CognitoUserPoolClient:\n    Type: AWS::Cognito::UserPoolClient\n    Properties:\n      # Generate an app client name based on the stage\n      ClientName: dev-user-pool-client\n      UserPoolId:\n        Ref: CognitoUserPool\n      ExplicitAuthFlows:\n        - ADMIN_NO_SRP_AUTH\n      GenerateSecret: false\n\n# Print out the Id of the User Pool that is created\nOutputs:\n  UserPoolId:\n    Value:\n      Ref: CognitoUserPool\n\n  UserPoolClientId:\n    Value:\n      Ref: CognitoUserPoolClient\n```\n\n### Add the identity pool config\nCreate a new file _cognito-identity-pool.yml_ with following content:\n```\nResources:\n  # The federated identity for our user pool to auth with\n  CognitoIdentityPool:\n    Type: AWS::Cognito::IdentityPool\n    Properties:\n      # Generate a name based on the stage\n      IdentityPoolName: devIdentityPool\n      # Don't allow unathenticated users\n      AllowUnauthenticatedIdentities: false\n      # Link to our User Pool\n      CognitoIdentityProviders:\n        - ClientId:\n            Ref: CognitoUserPoolClient\n          ProviderName:\n            Fn::GetAtt: [ \"CognitoUserPool\", \"ProviderName\" ]\n\n  # IAM roles\n  CognitoIdentityPoolRoles:\n    Type: AWS::Cognito::IdentityPoolRoleAttachment\n    Properties:\n      IdentityPoolId:\n        Ref: CognitoIdentityPool\n      Roles:\n        authenticated:\n          Fn::GetAtt: [CognitoAuthRole, Arn]\n\n  # IAM role used for authenticated users\n  CognitoAuthRole:\n    Type: AWS::IAM::Role\n    Properties:\n      Path: /\n      AssumeRolePolicyDocument:\n        Version: '2012-10-17'\n        Statement:\n          - Effect: 'Allow'\n            Principal:\n              Federated: 'cognito-identity.amazonaws.com'\n            Action:\n              - 'sts:AssumeRoleWithWebIdentity'\n            Condition:\n              StringEquals:\n                'cognito-identity.amazonaws.com:aud':\n                  Ref: CognitoIdentityPool\n              'ForAnyValue:StringLike':\n                'cognito-identity.amazonaws.com:amr': authenticated\n      Policies:\n        - PolicyName: 'CognitoAuthorizedPolicy'\n          PolicyDocument:\n            Version: '2012-10-17'\n            Statement:\n              - Effect: 'Allow'\n                Action:\n                  - 'mobileanalytics:PutEvents'\n                  - 'cognito-sync:*'\n                  - 'cognito-identity:*'\n                Resource: '*'\n\n# Print out the Id of the Identity Pool that is created\nOutputs:\n  IdentityPoolId:\n    Value:\n      Ref: CognitoIdentityPool\n```\n\n### Add the Cognito resources to the Serverless config\nAdd the following to the end of the file _serverless.yml_:\n```\nresources:\n  - ${file(cognito-user-pool.yml)}\n  - ${file(cognito-identity-pool.yml)}\n```\n\n### Deploy into AWS\n`serverless deploy -v`\nor\n`serverless deploy -v --aws-profile myProfile`\n\n\n\n## Set up React app\n\n### Create a new React project\n```\nnpx create-react-app react-cognito-demo-frontend\ncd react-cognito-demo-frontend\nnpm start\n```\n\n### Install NPM dependecies\n`npm install aws-amplify react-router-dom react-bootstrap --save`\n\n### Add css file for bootstrap\nIn _public/index.html_ add following line in head:\n\n`\u003clink rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\"\u003e`\n\n\n\n\n### Add Amplify config\nCreate a new file _src/config.js_ with following content (the values are printed in console at the end of _serverless deploy -v_):\n```\nexport default {\n  cognito: {\n    REGION: \"XXXXXXX\",\n    USER_POOL_ID: \"XXXXXXX\",\n    APP_CLIENT_ID: \"XXXXXXX\",\n    IDENTITY_POOL_ID: \"XXXXXXX\"\n  }\n};\n```\n\n### Setup Amplify and React router\nSee file [src/index.js](react-cognito-demo-frontend/src/index.js)\n\n### Handle state of authentication\nSee file [src/App.js](react-cognito-demo-frontend/src/App.js)\n\n### Set up routes to all pages\nCreate a new file [src/Routes.js](react-cognito-demo-frontend/src/Routes.js)\n\n### Set up all pages\nCreate a new file [src/Signup.js](react-cognito-demo-frontend/src/Signup.js)\n\nCreate a new file [src/Login.js](react-cognito-demo-frontend/src/Login.js)\n\nCreate a new file [src/Home.js](react-cognito-demo-frontend/src/Home.js)\n\n### Run React App\n`npm start`\n\nExisting pages:\n\nSignup: http://localhost:3000/signup\n\nLogin: http://localhost:3000/login\n\n\n### Set up AWS S3 bucket for static website hosting\n\n* Log into AWS console (https://console.aws.amazon.com)\n* Create a new S3 bucket\n* In the permissions step, make sure to uncheck **Block new public bucket policies** and **Block public and cross-account access if bucket has public policies.**\n* Go to **Permissions** tab and select **Bucket policy**\n* Add following content into policy editor, and replace _YOUR_S3_BUCKET_NAME_ with the name of your bucket:\n```\n{\n  \"Version\":\"2012-10-17\",\n  \"Statement\":[{\n\t\"Sid\":\"PublicReadForGetBucketObjects\",\n        \"Effect\":\"Allow\",\n\t  \"Principal\": \"*\",\n      \"Action\":[\"s3:GetObject\"],\n      \"Resource\":[\"arn:aws:s3:::YOUR_S3_BUCKET_NAME/*\"]\n    }\n  ]\n}\n```\n* Go to **Properties** tab and select **Static website hosting**\n* Select **Use this bucket to host a website** and add **index.html** as the Index Document and the Error Document.\n\n### Build the React app\n`npm run build`\n\n### Sync the React app into S3 bucket\n`aws s3 sync build/ s3://YOUR_S3_BUCKET_NAME`\n\n### See the React app running\nGo to http://YOUR_S3_BUCKET_NAME.s3-website-us-east-1.amazonaws.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmschaeffner%2Freact-cognito-demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmschaeffner%2Freact-cognito-demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmschaeffner%2Freact-cognito-demo/lists"}