Is it possible to use only Amplify Auth in a react app in isolation?

Question

I am bit new in this. I have a web app based on react and we have been using authentication using AWS cognito. I was using amazon-cognito-identity-js to signup users in the userpool and for login.

Now i am trying to replace that library with aws amplify auth because of its clean interface. But i dont want to go through the setup process (amplify init and everything), i want to use it like i used amazon-cognito-identity-js.

This is what i have done so far,

I have configured the Amplify Auth in my app.js file -

import Amplify from 'aws-amplify';

Amplify.configure({
    Auth: {

        // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
        identityPoolId: 'my id pool',

        // REQUIRED - Amazon Cognito Region
        region: 'my-region',

        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'my-userpool',

        // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: 'my app client',

        // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
        mandatorySignIn: true,

        // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
        authenticationFlowType: 'USER_SRP_AUTH'
    }
});

Here is what i have done to signup in my Registration component -

const { username, password, email, name } = this.state;
    try {
        const result = await Auth.signUp({
            username,
            password,
            attributes: {
                'name': name,
                'email': email,
                'phone_number': '',
            },
        });

        this.setState({showVerificationCode: true});
    } catch(e) {

        console.log(e);
    }

Now when i try to signup an user in my user pool, the user is created and the verification mail has been sent as well. But on the client side i am getting this error -

Can anyone please tell me if it is possible what i am trying? Do you think i can use only the Auth of aws amplify in isolation in the client side without any cloud or anything to just user signup and login in user pool?

score 1 · Answer 1 · edited Jul 24 '20 at 03:54

Okay, i have figured out why the error was occurring. I am writing down as answer so that people who stumble upon this can get an answer -

It seems like aws amplify use the Analytic service by default and try to log the 'auth' events. So i needed to disable it in the config -

Amplify.configure({
    Auth: {

        // REQUIRED only for Federated Authentication - Amazon Cognito Identity Pool ID
        identityPoolId: 'my id pool',

        // REQUIRED - Amazon Cognito Region
        region: 'my-region',

        // OPTIONAL - Amazon Cognito User Pool ID
        userPoolId: 'my-userpool',

        // OPTIONAL - Amazon Cognito Web Client ID (26-char alphanumeric string)
        userPoolWebClientId: 'my app client',

        // OPTIONAL - Enforce user authentication prior to accessing AWS resources or not
        mandatorySignIn: true,

        // OPTIONAL - Manually set the authentication flow type. Default is 'USER_SRP_AUTH'
        authenticationFlowType: 'USER_SRP_AUTH'
    },

    Analytics: {
        disabled: true,
    }
});

score 1 · Accepted Answer · answered Jul 08 '19 at 11:24

1

That is an issue for this.

You figured it out correctly, AWS Amplify is adding Analytics. But instead of configuring it with disabled Analytics like you did, the suggested fix is to use modular imports:

import Amplify from '@aws-amplify/core';
import Auth from '@aws-amplify/auth';

If you do

import Amplify from 'aws-amplify';

it automatically loads Auth, which causes the error.

answered Jul 08 '19 at 11:24

J. Hesters

13,117
31
133
249

1

Note that you don't need to import ''Amplify', you can simply import 'Auth' and then use 'Auth.configure({...})' – Trever Thompson Sep 03 '20 at 20:04

Is it possible to use only Amplify Auth in a react app in isolation?

2 Answers2