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 { 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,
},
});
">
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();<span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">`jwtToken: <span class="pl-s1"><span class="pl-kos">${</span><span class="pl-s1">jwtToken</span><span class="pl-kos">}</span></span>`</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-k">let</span> <span class="pl-s1">res</span> <span class="pl-c1">=</span> <span class="pl-k">await</span> <span class="pl-s1">web3auth</span><span class="pl-kos">.</span><span class="pl-en">login</span><span class="pl-kos">(</span><span class="pl-kos">{</span> <span class="pl-c1">loginProvider</span>: <span class="pl-c1">LOGIN_PROVIDER</span><span class="pl-kos">.</span><span class="pl-c1">JWT</span><span class="pl-kos">,</span> <span class="pl-c1">redirectUrl</span>: <span class="pl-s1">resolvedRedirectUrl</span><span class="pl-kos">,</span> <span class="pl-c">// redirect url after login</span> <span class="pl-c1">extraLoginOptions</span>: <span class="pl-kos">{</span> <span class="pl-c1">domain</span>: <span class="pl-s">'YOUR_COGNITO_DOMAIN'</span><span class="pl-kos">,</span> <span class="pl-c">// cognito domain (https://smth.us.auth0.com'</span> <span class="pl-c1">verifierIdField</span>: <span class="pl-s">'sub'</span><span class="pl-kos">,</span> <span class="pl-c1">id_token</span>: <span class="pl-s1">jwtToken</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">,</span> <span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s">'res: '</span><span class="pl-kos">,</span> <span class="pl-s1">res</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span> <span class="pl-kos">{</span> <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">error</span><span class="pl-kos">(</span><span class="pl-s1">e</span><span class="pl-kos">)</span><span class="pl-kos">;</span> <span class="pl-kos">}</span>};
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,
},
});
Originally posted by: kmml0
Check the discussion at: https://github.com/orgs/Web3Auth/discussions/920