Week 3 Decentralised Authentication

0. Learning Materials

Task List

Env Variables

Micro service
Variables

backend

  • HONEYCOMB_API_KEY

  • OTEL_SERVICE_NAME

  • OTEL_EXPORTER_OTLP_ENDPOINT

  • OTEL_EXPORTER_OTLP_HEADERS

  • AWS_XRAY_URL

  • AWS_XRAY_DAEMON_ADDRESS

  • AWS_DEFAULT_REGION

  • AWS_ACCESS_KEY_ID

  • AWS_SECRET_ACCESS_KEY

  • ROLLBAR_ACCESS_TOKEN

frontend

  • REACT_APP_PROJECT_REGION

  • REACT_APP_AWS_COGNITO_REGION

  • REACT_APP_AWS_USER_POOLS_ID

  • REACT_APP_CLIENT_ID

x-ray daemon

  • AWS_ACCESS_KEY_ID

  • AWS_SECRET_ACCESS_KEY

  • AWS_REGION

1. Workflow

1.1. Create Cognito Userpool in AWS Cognito

You could tailor the Cognito userpool configurations during creation based on your needs. I have listed the configurations Andrew used for this Cruddur project beneath the image.

Step 1.

Step 2.

  • Password Policy

    • User account recovery

Step 3.

  • Attribute verification and user account confirmation

    • Cognito-assisted verification and confirmation

  • Verifying attribute changes

  • Required attributes:

Step 4

Step 5

  • User pool name: cruddur-user-pool

Then create the pool.

1.2. Integrate Cognito to the Frontend

1.2.1. Setup: install packages

Install the aws-amplify npm library in the frontend. Make sure that you are at the root of the frontend application.

cd frontend-react-js
npm i aws-amplify --save

  • --save: save the library to the package.json.

After installing, make sure that the package is included in the updated package.json.

1.2.2. Implement AWS Amplify in the Frontend application.

App.js
import { Amplify } from 'aws-amplify';

Amplify.configure({
  "AWS_PROJECT_REGION": process.env.REACT_APP_AWS_PROJECT_REGION,
  "aws_cognito_region": process.env.REACT_APP_AWS_COGNITO_REGION,
  "aws_user_pools_id": process.env.REACT_APP_AWS_USER_POOLS_ID,
  "aws_user_pools_web_client_id": process.env.REACT_APP_CLIENT_ID,
  "oauth": {},
  Auth: {
    // We are not using an Identity Pool
    // identityPoolId: process.env.REACT_APP_IDENTITY_POOL_ID, // REQUIRED - Amazon Cognito Identity Pool ID
    region: process.env.REACT_APP_AWS_PROJECT_REGION,           // REQUIRED - Amazon Cognito Region
    userPoolId: process.env.REACT_APP_AWS_USER_POOLS_ID,         // OPTIONAL - Amazon Cognito User Pool ID
    userPoolWebClientId: process.env.REACT_APP_CLIENT_ID,   // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
  }
});

  • lines 4-14: process.env is a way for JavaScript to access the env variables stored locally and load them into a React application. A bit more about it here.

1.2.3. Update the checkAuth function HomeFeedPage.js

Now, replace the existing checkAuth() function that uses Cookie with the following:

HomeFeedPage.js
  const checkAuth = async () => {
    Auth.currentAuthenticatedUser({
      bypassCache: false
    })
    .then((user) => {
      console.log('user', user);
      return Auth.currentAuthenticatedUser()
    }).then((cognito_user) => {
      setUser({
        display_name: cognito_user.attributes.name,
        handle: cognito_user.attributes.preferred_username
      })
    })
    .catch((err) => console.log(err));
  }

  • lines 9-12: (optional) which will be then used to populate the user's data.

1.2.4. Implement Cognito Auth in ProfileInfo.js

Replace the signOut() function with Cookie with a new version that uses Cognito's Auth.signOut().

ProfileInfo.js
import { Auth } from "aws-amplify";

  const signOut = async () => {
    try {
      await Auth.signOut({ global: true });
      window.location.href = "/"
    } catch (error) {
      console.log('error signing out: ', error)
    }
  }

1.2.5. Implement Cognito Auth in SignIn.js

2. Discussion: AWS Amplify

2.1. Amplify

AWS Amplify is a comprehensive set of tools and services to simplify the process of building secure and scalable web and mobile applications with a wide range of features which include but not limited to:

  • Authentication (we are using this one in week 3)

  • API management

  • Analytics and monitoring

  • Hosting Frontend libraries and UI components

2.2. process.env

  • In JavaScript, process.env is an object that provides access to environment variables within a Node.js application.

    • You have to create a separate file named .env and store your local variables there.

    • Make sure that the .env file is located in the React project's root directory.

    • You can name the .env files depending on your development phase as in:

      • .env.development

      • .env.production, etc.

    • REACT_APP_: in order for React to auto-load the variables, we need this prefix before every variable we use.

2.3. package-lock.json

  • "package-lock.json is automatically generated for any operations where npm modifies either the node_modules tree, or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates." (npm, package-lock.json)

  • The package-lock.json file is automatically generated and updated by npm whenever a new package is installed or the versions of existing packages are changed.

    • It's recommended to commit the package-lock.json file together with the package.json file so we can save any team members (or your future self) some trouble.

PreviousWeek 2 ResourcesNextBug Fix: export 'Auth' (imported as 'Auth') was not found in 'aws-amplify'

Last updated