Deploying and Testing Cognito Cross Sites

Setting Up the Cognito Environment

  1. Create a file named app/.env.local for both app1 and app2 with the following content:
REACT_APP_USERPOOL_ID=YOUR_USER_POOL_ID
REACT_APP_CLIENT_ID=YOUR_CLIENT_ID

Cognito

  1. Use Create React App to set up the development workflow:
  • The following steps will be familiar.
  1. Install and launch web1 on port 3000:
cd app
npm install --force
npm start

Note: For MacBook, adjust the package.json file in the app folder as follows:

"scripts": {
"start": "PORT=3000 && react-scripts start",
...
},

Cognito

  1. Install and launch web2:
cd app2
npm install --force
npm start

Cognito

  1. After initializing web application 1, access web1 through localhost:3000:
  • Then, log in by selecting SIGN IN WEB1.

Cognito

  1. In the login interface for web1, if you do not have an account, select Register a new account. If you already have an account, fill in the information and select SIGN IN.

Cognito

  1. Successful login will display an interface similar to the following image.

Cognito

  1. Then, access web2 through the address localhost:3001:
  • You will be surprised as you can see the web2 interface without needing to log in.

Cognito

  1. Return to the web1 interface and log out by selecting SIGN OUT WEB1.

Cognito

  1. If you reload the web2 page, you will no longer be able to view the web2 interface.

Cognito