javascriptamazon-web-servicesamazon-cognitoserverlessamazon-cognito-triggers

AWS Cognito Auth with Phone Number OTP just like firebase, without Amplify


I am trying to enable login & Sign Up with Phone Number + OTP for a website (not Mobile) just like Firebase Auth offers.

I have looked up endless tutorials, almost all of which require AWS Amplify, which then requires knowing React/Angular/Vue (I'm not a front end developer). I followed tutorials like this one (https://techinscribed.com/passwordless-phone-number-authentication-using-aws-amplify-cognito/) and have created all the Lambda Functions, Cognito UserPools as stated in the tutorial. My roadblock is that it requires Amplify, and I just want to use vanilla JavaScript.

So I downloaded the AWS SDK builder with:

I am using Zappa with Flask (serverless) to render HTML + JS to the user. I have everything else configured with API Gateway for the backend. All I need to do is authenticate users and generate sessions tokens for authenticated users, allowing access to their personal data, (like saved info, favorites, etc).

I am praying for someone to help me figure out how I can authenticate my users and generate the session/JWT tokens for my users. Any guidance would be appreciated.


Solution

  • AWS Amplify is just a wrapper around the core AWS services. The goal is to provide a boilerplate that takes care of the common access patterns. You don't have to use framework if you don't want to and can use the core services directly.

    Before I point you to these low level APIs, it's worth noting that Amplify does have vanilla JS APIs as well. Refer the official docs here. You can handle authentication with only JS and not worry about any frameworks.

    The docs for the Authentication module can be found here.

    For reference, here are the scripts for Sign-up and login:

    import { Auth } from 'aws-amplify';
    
    async function signUp() {
        try {
            const user = await Auth.signUp({
                username,
                password,
                attributes: {
                    email,          // optional
                    phone_number,   // optional - E.164 number convention
                    // other custom attributes 
                }
            });
            console.log({ user });
        } catch (error) {
            console.log('error signing up:', error);
        }
    }
    
    
    async function SignIn() {
        try {
            const user = await Auth.signIn(username, password);
        } catch (error) {
            console.log('error signing in', error);
        }
    }