React Native + Cognito (Email + Password)

[kmml0]

How can email + password flow be implemented in React Native?
Following this tutorial to setup AWS Amplify (Cognito for Auth) Youtube
After that getting JWT token from Cognito and using web3Auth.login
Here is the code snippet to reproduce on Expo:

import React from 'react';
import { StyleSheet, Text, View, Pressable, Dimensions } from 'react-native';
import Constants, { AppOwnership } from 'expo-constants';
import * as Linking from 'expo-linking';
import * as WebBrowser from 'expo-web-browser';

import Buffer from 'buffer';
global.Buffer = Buffer.Buffer;

import Web3Auth, {
  LOGIN_PROVIDER,
  OPENLOGIN_NETWORK,
} from '@web3auth/react-native-sdk';

import { Amplify } from 'aws-amplify';
import config from './src/aws-exports';
import { withAuthenticator } from 'aws-amplify-react-native';
import { Auth } from 'aws-amplify';

Amplify.configure({
  ...config,
  Analytics: {
    disabled: true,
  },
});

const resolvedRedirectUrl =
  Constants.appOwnership == AppOwnership.Expo ||
  Constants.appOwnership == AppOwnership.Guest
    ? Linking.createURL('web3auth', {})
    : Linking.createURL('web3auth', { scheme: scheme });

// Cognito JWKS 'https://cognito-idp.us-east-1.amazonaws.com/us-east-1_dvsAu5onN/.well-known/jwks.json'

const CLIENT_ID = ''; // Web3Auth Client Id

const web3auth = new Web3Auth(WebBrowser, {
  clientId: CLIENT_ID,
  network: OPENLOGIN_NETWORK.TESTNET,
  loginConfig: {
    jwt: {
      verifier: 'cognito-email-verifier', // verifier name from web3auth dashboard
      typeOfLogin: LOGIN_PROVIDER.JWT,
      name: 'Cognito Email Verifier', // arbitrary name
      clientId: 'YOUR_COGNITO_CLIENT_ID', // cognito client id
    },
  },
});

const App = () => {
  const login = async () => {
    try {
      let session = await Auth.currentSession();
      let accessToken = session.getAccessToken();
      let jwtToken = accessToken.getJwtToken();

      console.log(`jwtToken: ${jwtToken}`);

      let res = await web3auth.login({
        loginProvider: LOGIN_PROVIDER.JWT,
        redirectUrl: resolvedRedirectUrl, // redirect url after login
        extraLoginOptions: {
          domain: 'YOUR_COGNITO_DOMAIN', // cognito domain (https://smth.us.auth0.com'
          verifierIdField: 'sub',
          id_token: jwtToken,
        },
      });

      console.log('res: ', res);
    } catch (e) {
      console.error(e);
    }
  };

  const signOut = async () => {
    try {
      await Auth.signOut({ global: true });
    } catch (error) {
      console.log('error signing out: ', error);
    }
  };
  return (
    <View style={styles.container}>
      <View style={styles.header}>
        <Text style={styles.headerText}>Welcome!</Text>
        <Pressable style={styles.button} onPress={() => login()}>
          <Text style={styles.buttonText}>Login With Web3Auth</Text>
        </Pressable>
        <Pressable style={styles.button} onPress={() => signOut()}>
          <Text style={styles.buttonText}>Sign out</Text>
        </Pressable>
      </View>
    </View>
  );
};

export default withAuthenticator(App);

const { width } = Dimensions.get('window');

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
    width: width,
    paddingVertical: 20,
  },
  header: {
    margin: 20,
    width: width,
    alignItems: 'center',
  },
  headerText: {
    fontSize: 28,
    fontWeight: 'bold',
  },
  button: {
    backgroundColor: '#ff9900',
    padding: 10,
    margin: 10,
    borderRadius: 6,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
  },
});

[kmml0]

Getting this error

[yashovardhan]

Can you please provide us the console logs?

If you're using android, you can directly open chrome://inspect and in remote targets you'll see your mobile browser developer options.

On safari follow this: https://help.remo.co/en/support/solutions/articles/63000251570-how-to-activate-the-iphone-debug-console-or-web-inspector-

[kmml0]

"Could not get result from torus nodes
Duplicate token found"

[RaveloMevaSoavina]

any updates on this. Having the same issue.