CODEWITHSUNDEEP
reactjsamazon-web-servicesamazon-cognitoaws-amplify
BB Developer
BB Developer

Reputation: 374

How do I create a standalone auth site using AWS Amplify with Cognito?

I have three react web apps. Two are platforms and one is a standalone login/signup. I want to be able to sign in to the auth ui and navigate bewteen the two platforms without requiring additional login. Right now I have it setup to login/signup in the auth UI using AWS Amplify. But I am not sure how to maintain the login state when going to the two platform web apps. I plan for them to all be under the same domain but using sub domains as well. For example, auth.domain.com, admin.domain.com, and customer.domain.com.

I am pretty new to AWS Amplify and all my previous applications had the auth built into them, so this is the first time I am trying to decouple the authentication from the main application. I am really looking for a direction to move forward in or a tutorial if one exists.

Thank you for all your help.

Upvotes: 1

Views: 1214

Answers (2)

Xitang
Xitang

Reputation: 155

So you have your LoginPage that handles login and you have some other pages you only let people see when they login. Here is one way to do it in a functional component.

At high level, you have a state that manages Authentication State. By default, it is initialize to loading. Then you use Auth.currentAuthenticatedUser() to check if user is login. If they are, you exposes them to page content. If not, you direct them to login page.

import React, { useState, useEffect } from 'react';
import { Redirect } from "react-router"; //Using react-router for page navigation for example
import { Auth, Hub} from 'aws-amplify';

const OtherPage = () =>{
    // Default at loading state
    const [authState, setAuthState] = useState('loading');

    // Use effect is run when component loading is mounted
    useEffect((data) => {
        // Define updateAuthState
        let updateAuthState = async () => {
            try {
                // Get current auth user, this throw error if not authenticated
                let user = await Auth.currentAuthenticatedUser();
                // No error, change auth state to show page content
                setAuthState("authenticated");
           }
           catch(error){
               // Error, change auth state to redirect user to login page
               setAuthState("unauthenticated");
           }
       }
       // Call AuthState Once
       updateAuthState();
       // Set up Hub to listen for auth event in case user log out
       Hub.listen('auth', updateAuthStat);
       return () => Hub.remove('auth', updateAuthState); // cleanup
    }

    // Do different things based on authState
    switch (authState) {
        case 'loading':
            return <h1>Loading...</h1>;
        case 'authenticated':
            return <h1>Your authenticated component</h1>;
        case 'unauthenticated':
            return <Redirect to="/login" />; {/*I recommend using /login for your login page */}
        default:
            return null;
    }
}

export default OtherPage;

The abode code is a simplified version I pull together and I haven't tested it, but the high level idea is there :)

For more info, I recommend to checkout Nader Dabit's The Complete Guide to User Authentication with the Amplify Framework [https://dev.to/dabit3/the-complete-guide-to-user-authentication-with-the-amplify-framework-2inh] and his free video [https://egghead.io/lessons/react-install-configure-the-aws-amplify-cli]

Upvotes: 1

Tarreq
Tarreq

Reputation: 1365

First, you can't maintain single auth pool for two different domains, as Cognito and Amplify together maintain the local storage items and tokens for auth per domain. This can be achieved if you have the two apps integrated into the same domain.

Upvotes: 0

Related Questions