API Example Implementation

The react native package is scan component.

What you'll need

Node.js version 18.0 or above :
- When installing Node.js, you are recommended to check all checkboxes related to dependencies.

Install and Configure

Install

npm i @bytexbyte/berify-app-open-api @react-native-async-storage/async-storage react-native-biometrics react-native-safe-area-context

iOS

This library use native-modules, so you will need to do pod install for iOS:

cd ios && pod install && cd ..

Android

It should be properly auto-linked, so you don't need to do anything.

Example

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [email, setEmail] = useState('');
  const [phone, setPhone] = useState('');
  const [firstName, setFirstName] = useState('');
  const [lastName, setLastName] = useState('');
  const [password, setPassword] = useState('');
  const form = { email, phone, firstName, lastName, password };
  const [signUpResult, setSignUpResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.signUp>>>();

  const signUp = async () => {
    const result = await berifyAppApi.auth.signUp('email-password', form)
    setSignUpResult(result)
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Text>Phone</Text>
            <TextInput placeholder="Phone" onChangeText={setPhone} value={phone} style={styles.input} />
            <Text>First Name</Text>
            <TextInput placeholder="First Name" onChangeText={setFirstName} value={firstName} style={styles.input} />
            <Text>Last Name</Text>
            <TextInput placeholder="Last Name" onChangeText={setLastName} value={lastName} style={styles.input} />
            <Text>Password</Text>
            <TextInput placeholder="Password" onChangeText={setPassword} value={password} secureTextEntry />
            <Button title="Sign Up" onPress={() => signUp()} />
            <Text>{JSON.stringify(signUpResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [signInResult, setSignInResult] = useState<any>();
  const form = { email, password };

  const signIn = async () => {
    const result = await berifyAppApi.auth.signIn('email-password', form)
    setSignInResult(result)
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Text>Password</Text>
            <TextInput placeholder="Password" onChangeText={setPassword} value={password} secureTextEntry style={styles.input} />
            <Button title='SignIn' onPress={() => signIn()} />
            <Text>{JSON.stringify(signInResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

SignOut

import React from 'react';
import { Button, View, ScrollView,  SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const signOut = async () => {
    await berifyAppApi.auth.signOut()
  };

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Button title='SignOut' onPress={() => signOut()} />
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

Create biometrics

import React, { useEffect, useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import AsyncStorage from '@react-native-async-storage/async-storage';
import ReactNativeBiometrics, { BiometryType } from 'react-native-biometrics';
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [userId, setUserId] = useState('');
  const [email, setEmail] = useState('');
  const [biometryType, setBiometryType] = useState<BiometryType | 'NotSupport'>();
  const [createBiometricsResult, setCreateBiometricsResult] = useState<Awaited<ReturnType<typeof enableBiometrics>>>();

  const rnBiometrics = new ReactNativeBiometrics();
  const storageKey = 'biometrics';
  type StorageData = { payload: string, publicKey: string, email: string | null | undefined };

  const createBiometrics = async () => {
    const result = await enableBiometrics(userId, email);
    setCreateBiometricsResult(result)
  }

  const getBiometricsData = async (): Promise<StorageData | null> => {
    const storageDataStr = await AsyncStorage.getItem(storageKey);
    if (!storageDataStr) return null;
    try {
      return JSON.parse(storageDataStr);
    } catch (error) {
      return null;
    }
  };

  const createSignature = async () => {
    const biometricsData = await getBiometricsData();
    if (!biometricsData) {
      return;
    }
    const { payload, publicKey } = biometricsData;
    try {
      const result = await rnBiometrics.createSignature({
        payload, promptMessage: 'Verify ' + biometryType
      });
      return { ...result, payload, publicKey };
    } catch (error) {
      return undefined;
    }
  };

  const enableBiometrics = async (id: string, email: string):
    Promise<
      Awaited<ReturnType<typeof berifyAppApi.auth.createBiometrics>> |
      { error: 'create signature error.' }
    > => {
    const payload = id;
    const { publicKey } = await rnBiometrics.createKeys();
    const storageData: StorageData = { payload, publicKey, email };
    await AsyncStorage.setItem(storageKey, JSON.stringify(storageData));

    const newSignature = await createSignature();
    if (newSignature && newSignature.success && newSignature.signature) {
      const result = await berifyAppApi.auth.createBiometrics({
        publicKey, id: payload,
        signature: newSignature.signature
      });
      return result;
    }
    return { error: 'create signature error.' };
  };

  useEffect(() => {
    (async () => {
      const { biometryType: type } = await rnBiometrics.isSensorAvailable();
      if (type === undefined) {
        setBiometryType('NotSupport');
      } else {
        setBiometryType(type);
      }
    })();
  }, []);

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>UserId</Text>
            <TextInput placeholder="UserId" onChangeText={setUserId} value={userId} style={styles.input} />
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Button title="Create Biometrics" onPress={() => { if (biometryType !== 'NotSupport') { createBiometrics() } else { console.log('Biometrics not supported'); } }} />
            <Text>{JSON.stringify(createBiometricsResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

Forget password

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [email, setEmail] = useState('');
  const [forgetPasswordResult, setForgetPasswordResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.forgetPassword>>>();

  const forgetPassword = async () => {
    const result = await berifyAppApi.auth.forgetPassword("email-password", { identifier: email })
    setForgetPasswordResult(result)
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Forget Password</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Button title="Forget Password" onPress={() => forgetPassword()} />
            <Text>{JSON.stringify(forgetPasswordResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

Reset password

Note: tokenId is Forget password response tokenId

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [tokenId, setTokenId] = useState('');
  const [newPassword, setnewPassword] = useState('');
  const [resetPasswordResult, setResetPasswordResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.resetPassword>>>();

  const resetPassword = async () => {
    const result = await berifyAppApi.auth.resetPassword("email-password", { tokenId, password: newPassword })
    setResetPasswordResult(result)
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Reset Password</Text>
            <TextInput placeholder="New Password" onChangeText={setnewPassword} value={newPassword} secureTextEntry style={styles.input} />
            <TextInput placeholder="TokenId" onChangeText={setTokenId} value={tokenId} style={styles.input} />
            <Button title="Reset Password" onPress={() => resetPassword()} />
            <Text>{JSON.stringify(resetPasswordResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

Send verify

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [email, setEmail] = useState('');
  const [sendVerifyResult, setSendVerifyResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.sendVerify>>>();

  const sendVerify = async () => {
    const result = await berifyAppApi.auth.sendVerify('email-password', { identifier: email })
    setSendVerifyResult(result)
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Button title="Send Verify" onPress={() => sendVerify()} />
            <Text>{JSON.stringify(sendVerifyResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

Check verify

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [email, setEmail] = useState('');
  const [checkVerifyResult, setCheckVerifyResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.checkVerify>>>();

  const checkVerify = async () => {
    const result = await berifyAppApi.auth.checkVerify({ email })
    setCheckVerifyResult(result)
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Button title="Check Verify" onPress={() => checkVerify()} />
            <Text>{JSON.stringify(checkVerifyResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

Verify

import React, { useState } from 'react';
import { Text, Button, ScrollView, TextInput, View, SafeAreaView, StyleSheet } from 'react-native';
import BerifyAppApi from '@bytexbyte/berify-app-open-api'
import { SafeAreaProvider } from 'react-native-safe-area-context';

const berifyAppApi = new BerifyAppApi({
  host: 'https://sandbox-staging-app.berify.io', // (For testing, please use https://sandbox-staging-app.berify.io)
  env: '', // Specify your environment if needed
});

export default function App() {

  const [email, setEmail] = useState('');
  const [sendVerifyResult, setSendVerifyResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.sendVerify>>>();
  const [verifyResult, setVerifyResult] = useState<Awaited<ReturnType<typeof berifyAppApi.auth.verify>>>();

  const sendVerify = async () => {
    const result = await berifyAppApi.auth.sendVerify('email-password', { identifier: email })
    setSendVerifyResult(result)
  }

  const verify = async () => {
    if (sendVerifyResult?.identifier && sendVerifyResult.token) {
      const result = await berifyAppApi.auth.verify("email-password", { identifier: sendVerifyResult.identifier, token: sendVerifyResult.token })
      setVerifyResult(result)
    }
  }

  return (<>
    <SafeAreaProvider>
      <SafeAreaView style={styles.safeAreaView}>
        <ScrollView contentContainerStyle={styles.container}>
          <View style={styles.innerContainer}>
            <Text>Email</Text>
            <TextInput placeholder="Email" onChangeText={setEmail} value={email} style={styles.input} />
            <Button title="Verify" onPress={() => verify()} />
            <Text>{JSON.stringify(verifyResult, null, 2)}</Text>
          </View>
        </ScrollView>
      </SafeAreaView>
    </SafeAreaProvider>
  </>);
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
    paddingTop: 40, // Adjust this value to add more padding at the top
  },
  container: {
    flexGrow: 1,
    paddingHorizontal: 16,
  },
  innerContainer: {
    flex: 1,
    justifyContent: 'center',
  },
  input: {
    borderColor: '#ccc',
    borderWidth: 1,
    padding: 8,
    marginBottom: 16,
    borderRadius: 4,
  }
});

API Example Implementation

What you'll need​

Install and Configure​

Install​

iOS​

Android​

Example​

SignUp​

SignIn​

SignOut​

Create biometrics​

Forget password​

Reset password​

Send verify​

Check verify​

Verify​

What you'll need

Install and Configure

Install

iOS

Android

Example

SignUp

SignIn

SignOut

Create biometrics

Forget password

Reset password

Send verify

Check verify

Verify