User                OpenID-Compliant          Identity Provider          Application
     |                       Cruddur                    |                       | 
     |------------ Redirect to Login Page ------------->|                       | Y
     |                                                  |                       | A
     |                <------- Login Page --------------|                       | Y
     |                                                  |                       | A
     |----- Redirect with Auth Token (after login)----->|                       | 2
     |                                                  |                       | D
     |                      <------- Auth Token --------|                       | E
     |                                                  |                       | V
     |------------------- Access Protected Resources -------------------------->| O
     |                                                  |                       | P
     |<----- Respond with Protected Resource Data ------|                       | S
     |------------ Sign Out Operation------------------>|                       | 

User --> [AWS Cognito] --(OAuth 2.0, OpenID Connect)--> [Identity Pool] --> [Federated Identities] --> [AWS Services, Yacrud, Products..]

npm i aws-amplify --save

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: {
    region: process.env.REACT_APP_AWS_PROJECT_REGION,
    userPoolId: process.env.REACT_APP_AWS_USER_POOLS_ID,
    userPoolWebClientId: process.env.REACT_APP_CLIENT_ID,
  },
});

REACT_APP_AWS_PROJECT_REGION: "${AWS_DEFAULT_REGION}"
REACT_APP_AWS_COGNITO_REGION: "${AWS_DEFAULT_REGION}"
REACT_APP_AWS_USER_POOLS_ID: "${AWS_USER_POOLS_ID}"
REACT_APP_CLIENT_ID: "${CLIENT_ID}"

export REACT_APP_AWS_USER_POOLS_ID=<USER_POOLS_ID>
export REACT_APP_CLIENT_ID=<APP_CLIENT_ID>

import { Auth } from 'aws-amplify';

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));
};

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

import { Auth } from 'aws-amplify';

setErrors("");  
event.preventDefault(); 

const onsubmit = async (event) => {
    setErrors("");
    event.preventDefault();
    
    // Rest of the code will go here...
};

try {
    // Try user using the provided email and password
    const user = await Auth.signIn(email, password);
 
    // Store the user's access token securely in the browser
    localStorage.setItem("access_token", user.signInUserSession.accessToken.jwtToken);
 
    // Redirect the user to the main page after successful sign-in
    window.location.href = "/";
} catch (error) {
    // Errors during sign-in will be handled in the subsequent code block
}

} catch (error) {
    // Log the error to the console
    console.log("Error!", error);
    
    if (error.code === "UserNotConfirmedException") {
        window.location.href = "/confirm";
    }
    
    // Display the error message to the user
    setErrors(error.message);
}

// Handle the submission of sign-in data
const onsubmit = async (event) => {
    setErrors("");  // Clear any previous error messages
    event.preventDefault();  // Prevent the default form submission behavior
    
    try {
        // Attempt to sign in the user using the provided email and password
        const user = await Auth.signIn(email, password); 
        localStorage.setItem("access_token", user.signInUserSession.accessToken.jwtToken);
 
        // Redirect to the home page upon successful sign-in
        window.location.href = "/";
    } catch (error) {
        console.log("Error!", error);
 
        // Check if the error is due to an unconfirmed user
        if (error.code === "UserNotConfirmedException") {
            // Redirect to the confirmation page for user confirmation
            window.location.href = "/confirm";
        }
        setErrors(error.message);  // Display the error message to the user
    }
    
    return false;  // Prevent the form from submitting
};

aws cognito-idp admin-set-user-password --username <username> --password <password> --user-pool-id <userpool_id> --permanent

import { Auth } from 'aws-amplify';

const onsubmit = async (event) => {
  event.preventDefault();
  setErrors('');
  try {
    const { user } = await Auth.signUp({
      username: email,
      password: password,
     // To Be Continued
    });
    console.log(user);
    window.location.href = `/confirm?email=${email}`;
  } catch (error) {
    console.log(error);
    setErrors(error.message);
  }
  return false;
};

      autoSignIn: { 
        // optional - enables auto sign in after user is confirmed
        enabled: true,
      }

  try {
    const { user } = await Auth.signUp({
      attributes: {
        name: name,
        email: email,
        preferred_username: username,
      },

const onsubmit = async (event) => {
  event.preventDefault();
  setErrors('');
  try {
    const { user } = await Auth.signUp({
      username: email,
      password: password,
      attributes: {
        name: name,
        email: email,
        preferred_username: username,
      },
      autoSignIn: { 
        // optional - enables auto sign in after user is confirmed
        enabled: true,
      }
    });
    console.log(user);
    window.location.href = `/confirm?email=${email}`;
  } catch (error) {
    console.log(error);
    setErrors(error.message);
  }
  return false;
};

import { Auth } from 'aws-amplify';

const resend_code = async (event) => {
  setErrors('');
  try {
     # To Be Continued.
  } catch (err) {
    # To Be Continued
  }
};

  try {
    // Resend the activation code using AWS Amplify Auth
    await Auth.resendSignUp(email);
    console.log('Activation code resent successfully');
    setCodeSent(true);

    catch (err) {
    // Handle errors during resend process
    console.log(err);
    if (err.message === 'Username cannot be empty') {
      setErrors("Please provide an email to resend the Activation Code.");
    } else if (err.message === "Username/client id combination not found.") {
      setErrors("The provided email is either invalid or cannot be found.");
    }

const onsubmit = async (event) => {
    event.preventDefault();
    setErrors('');
    try {
      // Confirm the sign-up using AWS Amplify Auth
      await Auth.confirmSignUp(email, code);
      // Redirect the user to the homepage upon successful confirmation
      window.location.href = "/";
    } catch (error) {
      // Handle errors during confirmation
      setErrors(error.message);
    }
    return false;
}

const onsubmit_send_code = async (event) => {
  event.preventDefault();
  setErrors(''); // Clear any previous error messages.
   # To Be Continued
  return false; // Prevent the default form submission behavior.
}
const onsubmit_confirm_code = async (event) => {
  event.preventDefault();
  setErrors(''); // Clear any previous error messages.
  if (password == passwordAgain) {
   # To Be Continued
  } else {
  }
  return false; 
}

const onsubmit_send_code = async (event) => {
  event.preventDefault();
  setErrors(''); // Clear any previous error messages.
 
  // Call the `forgotPassword` method from the `Auth` module to send a password reset code.
  Auth.forgotPassword(username)
    .then((data) => setFormState('confirm_code')) // Move to the next form state after successful request.
    .catch((err) => setErrors(err.message)); // Handle any errors by displaying an error message.
  return false; // Prevent the default form submission behavior.
}

const onsubmit_confirm_code = async (event) => {
  event.preventDefault();
  setErrors(''); 
 
  // Check if the entered passwords match.
  if (password == passwordAgain) {
    // Call the `forgotPasswordSubmit` method to confirm the password reset using the code and new password.
    Auth.forgotPasswordSubmit(username, code, password)
       // Move to the success state after successful password reset.
      .then((data) => setFormState('success')) 
      // Handle any errors by displaying an error message.
      .catch((err) => setErrors(err.message)); 
  } else {
    // Display an error message if passwords do not match.
    setErrors('Passwords do not match');
  }
  return false; // Prevent the default form submission behavior.
}

import { Auth } from 'aws-amplify';
 
const onsubmit_send_code = async (event) => {
  event.preventDefault();
  setErrors('');
  Auth.forgotPassword(username)
    .then((data) => setFormState('confirm_code'))
    .catch((err) => setErrors(err.message));
  return false;
}
 
const onsubmit_confirm_code = async (event) => {
  event.preventDefault();
  setErrors('');
  if (password == passwordAgain) {
    Auth.forgotPasswordSubmit(username, code, password)
      .then((data) => setFormState('success'))
      .catch((err) => setErrors(err.message));
  } else {
    setErrors('Passwords do not match');
  }
  return false;
}

+--------------------------------------------------------------------+
|                              JWT                                   |
|--------------------------------------------------------------------|
|                        Header (Base64)                             |
|--------------------------------------------------------------------|
|                        Payload (Base64)                            |
|--------------------------------------------------------------------|
|                       Signature (Base64)                           |
+--------------------------------------------------------------------+

{
  "alg": "HS256",   
  "typ": "JWT"      
}

{
  "sub": "1234567890",    
  "name": "Yahya Abulhaj",     
  "iat": 1516239022      
}

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.
SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

Login:   --------------------------------------+
                  | User Enters |    Server    |
                  | Credentials |    Validates |
                  -----------------------------+
                                   |           +
                                   v           +
Access Token:  --------------------------------+
                  | Server Generates |         +
                  | Access Token     |         +
                  -----------------------------+
                                   |
                                   v
Refresh Token: ---------------------------------+
                  | Server Generates |          +
                  | Refresh Token    |          +
                  ------------------------------+
                                   |
                                   v
Access Token:  ---------------------------------+
                  | Client Sends    |           +
                  | Access Token    |           +
                  | in Requests     |           +
                  ------------------------------+
                                   |
                                   v
           -------------------------------------+
          | Access Token Expires,               |
          | Client Uses Refresh Token to Request|
          | a New Access Token                  +
           -------------------------------------+
                                   |
                                   v
Access Token:     -------------------------------+
                  | Server Validates|            +
                  | Refresh Token   |            +
                  | and Generates   |            +
                  | New Access Token|            +
                  -------------------------------+
                                   |
                                   v
          +--------------------------------------+
          | Client Sends New Access Token in     |
          |  Next Requests                       +
          +--------------------------------------+

   ┌──────────────────┐              ┌────────────────┐
   │   Receive JWT    │              │ Parse Token    │
   │     Token        ◄────────────▶    (Header,       
   └──────────────────┘              │   Payload,     │
                                     │   Signature)   │
                                     └────────────────┘
                                                 │
                                                 ▼
                               ┌───────────────────────┐
                               │   Validate Header     │
                               │  (Algorithm Check)    │
                               └───────────────────────┘
                                                 │
                                                 ▼
                     ┌─────────────────────────────────────┐
                     │    Validate Issuer and Audience     │
                     └─────────────────────────────────────┘
                                                 │
                                                 ▼
              ┌─────────────────────────────────────────────────┐
              │ Check Expiration Time (exp) and Not Before (nbf)│
              └─────────────────────────────────────────────────┘
                                                 │
                                                 ▼
                 ┌────────────────────────────────────────┐
                 │    Check Issued At (iat) if Necessary  │
                 └────────────────────────────────────────┘
                                                 │
                                                 ▼
    ┌───────────────────────────────────────────────────────────┐
    │     Verify Signature (Using Secret Key or Public Key)     │
    └───────────────────────────────────────────────────────────┘
                                                 │
                                                 ▼
                         ┌─────────────────────────────────┐
                         │   Make Token Validity Decision  │
                         └─────────────────────────────────┘
                                                 │
                                                 ▼
                       ┌──────────────────────────────────┐
                       │ Perform Additional Custom Checks │
                       └──────────────────────────────────┘
                                                 │
                                                 ▼
                           ┌────────────────────────┐
                           │     Process Request    │
                           └────────────────────────┘
                            │  │  │
                            ▼  ▼  ▼   
     ┌──────────────────────────────────────────────┐
     │    Resource Access, Response Generation      │
     └──────────────────────────────────────────────┘                

import time
import requests
from jose import jwk, jwt
from jose.exceptions import JOSEError
from jose.utils import base64url_decode

class FlaskAWSCognitoError(Exception):
  pass
 
class TokenVerifyError(Exception):
  pass

def extract_access_token(request_headers):
    access_token = None
    auth_header = request_headers.get("Authorization")
    if auth_header and " " in auth_header:
        _, access_token = auth_header.split()
    return access_token

class CognitoJwtToken:
    def __init__(self, user_pool_id, user_pool_client_id, region, request_client=None):
    # To be Continued
 
    def _load_jwk_keys(self):
    # To be Continued
 
    @staticmethod
    def _extract_headers(token):
    # To be Continued
 
    def _find_pkey(self, headers):
    # To be Continued
 
    @staticmethod
    def _verify_signature(token, pkey_data):
    # To be Continued
 
    @staticmethod
    def _extract_claims(token):
    # To be Continued
 
    @staticmethod
    def _check_expiration(claims, current_time):
    # To be Continued
 
    def _check_audience(self, claims):
    # To be Continued
 
    def verify(self, token, current_time=None):
    # To be Continued

    def __init__(self, user_pool_id, user_pool_client_id, region, request_client=None):
        self.region = region
        if not self.region:
            raise FlaskAWSCognitoError("No AWS region provided")
        self.user_pool_id = user_pool_id
        self.user_pool_client_id = user_pool_client_id
        self.claims = None
        if not request_client:
            self.request_client = requests.get
        else:
            self.request_client = request_client
        self._load_jwk_keys()

    def _load_jwk_keys(self):
        keys_url = f"https://cognito-idp.{self.region}.amazonaws.com/{self.user_pool_id}/.well-known/jwks.json"
        try:
            response = self.request_client(keys_url)
            self.jwk_keys = response.json()["keys"]
        except requests.exceptions.RequestException as e:
            raise FlaskAWSCognitoError(str(e)) from e

    @staticmethod
    def _extract_headers(token):
        try:
            headers = jwt.get_unverified_headers(token)
            return headers
        except JOSEError as e:
            raise TokenVerifyError(str(e)) from e

    def _find_pkey(self, headers):
        kid = headers["kid"]
        key_index = -1
        for i in range(len(self.jwk_keys)):
            if kid == self.jwk_keys[i]["kid"]:
                key_index = i
                break
        if key_index == -1:
            raise TokenVerifyError("Public key not found in jwks.json")
        return self.jwk_keys[key_index]

    @staticmethod
    def _verify_signature(token, pkey_data):
        try:
            public_key = jwk.construct(pkey_data)
        except JOSEError as e:
            raise TokenVerifyError(str(e)) from e
        message, encoded_signature = str(token).rsplit(".", 1)
        decoded_signature = base64url_decode(encoded_signature.encode("utf-8"))
        if not public_key.verify(message.encode("utf8"), decoded_signature):
            raise TokenVerifyError("Signature verification failed")
 

    @staticmethod
    def _extract_claims(token):
        try:
            claims = jwt.get_unverified_claims(token)
            return claims
        except JOSEError as e:
            raise TokenVerifyError(str(e)) from e

    @staticmethod
    def _check_expiration(claims, current_time):
        if not current_time:
            current_time = time.time()
        if current_time > claims["exp"]:
            raise TokenVerifyError("Token is expired") 

    def _check_audience(self, claims):
        audience = claims["aud"] if "aud" in claims else claims["client_id"]
        if audience != self.user_pool_client_id:
            raise TokenVerifyError("Token was not issued for this audience")

    def verify(self, token, current_time=None):
        """ https://github.com/awslabs/aws-support-tools/blob/master/Cognito/decode-verify-jwt/decode-verify-jwt.py """
        if not token:
            raise TokenVerifyError("No token provided")
 
        headers = self._extract_headers(token)
        pkey_data = self._find_pkey(headers)
        self._verify_signature(token, pkey_data)
 
        claims = self._extract_claims(token)
        self._check_expiration(claims, current_time)
        self._check_audience(claims)
 
        self.claims = claims 
        return claims

import time
import requests
from jose import jwk, jwt
from jose.exceptions import JOSEError
from jose.utils import base64url_decode
 
class FlaskAWSCognitoError(Exception):
  pass
 
class TokenVerifyError(Exception):
  pass
 
def extract_access_token(request_headers):
    access_token = None
    auth_header = request_headers.get("Authorization")
    if auth_header and " " in auth_header:
        _, access_token = auth_header.split()
    return access_token
 
class CognitoJwtToken:
    def __init__(self, user_pool_id, user_pool_client_id, region, request_client=None):
        self.region = region
        if not self.region:
            raise FlaskAWSCognitoError("No AWS region provided")
        self.user_pool_id = user_pool_id
        self.user_pool_client_id = user_pool_client_id
        self.claims = None
        if not request_client:
            self.request_client = requests.get
        else:
            self.request_client = request_client
        self._load_jwk_keys()
 
    def _load_jwk_keys(self):
        keys_url = f"https://cognito-idp.{self.region}.amazonaws.com/{self.user_pool_id}/.well-known/jwks.json"
        try:
            response = self.request_client(keys_url)
            self.jwk_keys = response.json()["keys"]
        except requests.exceptions.RequestException as e:
            raise FlaskAWSCognitoError(str(e)) from e
 
    @staticmethod
    def _extract_headers(token):
        try:
            headers = jwt.get_unverified_headers(token)
            return headers
        except JOSEError as e:
            raise TokenVerifyError(str(e)) from e
 
    def _find_pkey(self, headers):
        kid = headers["kid"]
        key_index = -1
        for i in range(len(self.jwk_keys)):
            if kid == self.jwk_keys[i]["kid"]:
                key_index = i
                break
        if key_index == -1:
            raise TokenVerifyError("Public key not found in jwks.json")
        return self.jwk_keys[key_index]
 
    @staticmethod
    def _verify_signature(token, pkey_data):
        try:
            public_key = jwk.construct(pkey_data)
        except JOSEError as e:
            raise TokenVerifyError(str(e)) from e
        message, encoded_signature = str(token).rsplit(".", 1)
        decoded_signature = base64url_decode(encoded_signature.encode("utf-8"))
        if not public_key.verify(message.encode("utf8"), decoded_signature):
            raise TokenVerifyError("Signature verification failed")
 
    @staticmethod
    def _extract_claims(token):
        try:
            claims = jwt.get_unverified_claims(token)
            return claims
        except JOSEError as e:
            raise TokenVerifyError(str(e)) from e
 
    @staticmethod
    def _check_expiration(claims, current_time):
        if not current_time:
            current_time = time.time()
        if current_time > claims["exp"]:
            raise TokenVerifyError("Token is expired")
 
    def _check_audience(self, claims):
        audience = claims["aud"] if "aud" in claims else claims["client_id"]
        if audience != self.user_pool_client_id:
            raise TokenVerifyError("Token was not issued for this audience")
 
    def verify(self, token, current_time=None):
        """ https://github.com/awslabs/aws-support-tools/blob/master/Cognito/decode-verify-jwt/decode-verify-jwt.py """
        if not token:
            raise TokenVerifyError("No token provided")
 
        headers = self._extract_headers(token)
        pkey_data = self._find_pkey(headers)
        self._verify_signature(token, pkey_data)
 
        claims = self._extract_claims(token)
        self._check_expiration(claims, current_time)
        self._check_audience(claims)
 
        self.claims = claims 
        return claims

        headers: {
          Authorization: `Bearer ${localStorage.getItem("access_token")}`,
        },

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

cors = CORS(
    app,
    resources={r"/api/*": {"origins": origins}},
    headers=["Content-Type", "Authorization", "traceparent"],
    expose_headers="Authorization",
    methods="OPTIONS,GET,HEAD,POST",
)

app.logger.debug("AUTH HEADER", request.headers.get("Authorization"))

from lib.cognito_jwt_token import CognitoJwtToken, extract_access_token, TokenVerifyError

cognito_jwt_token = CognitoJwtToken(
    region=os.getenv("AWS_DEFAULT_REGION"),
    user_pool_client_id=os.getenv("AWS_COGNITO_USER_POOL_CLIENT_ID"),
    user_pool_id=os.getenv("AWS_COGNITO_USER_POOL_ID"),
)

@app.route("/api/activities/home", methods=["GET"])
def data_home():
    access_token = extract_access_token(request.headers)
    try:
        claims = cognito_jwt_token.verify(access_token)
        # authenticated request
        app.logger.debug("authenticated")
        app.logger.debug(claims)
        app.logger.debug(claims["username"])
        data = HomeActivities.run(cognito_user_id=claims["username"])
    except TokenVerifyError as e:
        # unauthenticated request
        app.logger.debug(e)
        app.logger.debug("unauthenticated")
        data = HomeActivities.run()
    return data, 200

if cognito_user_id != None:
    extra_crud = {
      'uuid': '248959df-3079-4947-b847-9e0892d1baz4',
      'handle':  'Lore',
      'message': 'My dear brother, it the humans that are the problem',
      'created_at': (now - timedelta(hours=1)).isoformat(),
      'expires_at': (now + timedelta(hours=12)).isoformat(),
      'likes': 1042,
      'replies': []
    }
    results.insert(0,extra_crud)

requests
python-jose

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

:root {
  --bg: rgb(61,13,123);
  --fg: rgb(8,1,14);
 
  --field-border: rgb(255,255,255,0.29);
  --field-border-focus: rgb(149,0,255,1);
  --field-bg: rgb(31,31,31);
}

* { box-sizing: border-box; }
html,body { 
  height: 100%; 
  width: 100%; 
/* background: rgb(14,3,28); */
  background: var(--bg);
}

.content {
  width: 600px;
  height: 100%;
  /* background: #000;*/
  background: var(--fg);
}

.activity_item {
  display: flex;
  flex-direction: column;
  /*border-bottom: solid 1px rgb(31,36,49);*/
  border-bottom: solid 1px rgb(60,54,79);
  overflow: hidden;
  padding: 16px;
}

section footer a {
  text-decoration: none;
  /*color: rgba(255,255,255,0.2);*/
  color: rgba(255,255,255,0.5);
  font-size: 14px;
}

.join {
  display: flex;
  flex-direction: column;
  /*background: #000;*/
  background: var(--fg);
  border-radius: 8px;
  margin-top: 24px;
}

.search_field input[type='text'] {
  /*border: solid 1px rgba(149,0,255,0.1);*/
  /*background: rgba(149,0,255,0.1);*/
  border: solid 1px var(--field-border);
  background: var(--field-bg);
  padding: 16px;
  font-size: 16px;
  border-radius: 8px;
  width: 100%;
  outline: none;
  color: #fff;
}
 
.search_field input[type='text']:focus {
  /*border: solid 1px rgb(149,0,255,1);*/
  border: solid 1px var(--field-border-focus)
}

article.signin-article input[type='text'],
article.signin-article input[type='password'] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  outline: none;
  display: block;
  outline: none;
  resize: none;
  width: 100%;
  padding: 16px;
  /*border: solid 1px #555555;*/
  /*background: #1f1f1f;*/
  border: solid 1px var(--field-border);
  background: var(--field-bg);
  color: #fff;
}

article.signin-article input[type='text']:focus ,
article.signin-article input[type='password']:focus {
  /*border: solid 1px rgb(149,0,255,1);*/
  border: solid 1px var(--field-border-focus);
}

article.signup-article input[type='text'],
article.signup-article input[type='password'] {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  border-radius: 4px;
  border: none;
  outline: none;
  display: block;
  outline: none;
  resize: none;
  width: 100%;
  padding: 16px;
  /*border: solid 1px #555555;*/
  border: solid 1px var(--field-border);
  background: #1f1f1f;
  color: #fff;
}

article.signup-article input[type='text']:focus ,
article.signup-article input[type='password']:focus {
  /*border: solid 1px rgb(149,0,255,1);*/
  border: solid 1px var(--field-border-focus);
}