session management

Author: Musab Hussain

example/App.tsx

@@ -1,10 +1,11 @@
 import { StatusBar } from "expo-status-bar";
-import { useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { StyleSheet, Text, View, Button } from "react-native";
 import Web3Auth, { LOGIN_PROVIDER, OPENLOGIN_NETWORK, State } from "@web3auth/react-native-sdk";
 import Constants, { AppOwnership } from "expo-constants";
 import * as Linking from "expo-linking";
 import * as WebBrowser from "expo-web-browser";
+import * as SecureStore from 'expo-secure-store';
 import { Buffer } from "buffer";
 
 global.Buffer = global.Buffer || Buffer;
@@ -20,13 +21,23 @@ export default function App() {
   const [key, setKey] = useState("");
   const [errorMsg, setErrorMsg] = useState("");
   const [userInfo, setUserInfo] = useState<State>(null);
+
+  var web3auth = useRef<Web3Auth>();
+
+  useEffect(() => {
+    web3auth.current = new Web3Auth(WebBrowser, SecureStore, {
+      clientId: "BDj1toq1N1xYgDIJ00ADR-QPJ71ESzJcB3ijVHP1TsIX7nsx_lu6uLoJQMPze1vpGDt--Ew95RGxz-RgOh1tcxM",
+      network: OPENLOGIN_NETWORK.TESTNET,
+    });
+    web3auth.current.sessionResponse.on("login", function(state: State) {
+      setKey(state.privKey || "no key");
+      setUserInfo(state);
+    });
+  }, []);
+
   const login = async () => {
     try {
-      const web3auth = new Web3Auth(WebBrowser, {
-        clientId: "BA0mVyeHATikwuXVhXWCNjAxHthlw0w84mUhLuxlC4KZKjvmBsbdbmEWTizJ26YzrbKSWbOZbtGYdVDm0ESuYSg",
-        network: OPENLOGIN_NETWORK.TESTNET,
-      });
-      const state = await web3auth.login({
+      const state = await web3auth.current.login({
         loginProvider: LOGIN_PROVIDER.GOOGLE,
         redirectUrl: resolvedRedirectUrl,
       });

example/package-lock.json

@@ -18,7 +18,8 @@
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-native": "^0.68.2",
-    "react-native-web": "0.17.7"
+    "react-native-web": "0.17.7",
+    "expo-secure-store": "~11.2.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.9",

example/package.json

@@ -8,8 +8,9 @@
  * @format
  */
 
-import React, {useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import * as WebBrowser from '@toruslabs/react-native-web-browser';
+import EncryptedStorage from 'react-native-encrypted-storage';
 import Web3Auth, {
   LOGIN_PROVIDER,
   OPENLOGIN_NETWORK,
@@ -28,24 +29,34 @@ const App = () => {
   const [key, setKey] = useState('');
   const [errorMsg, setErrorMsg] = useState('');
   const [userInfo, setUserInfo] = useState<State | null>(null);
+
+  var web3auth = useRef<Web3Auth>();
+  
+  useEffect(() => {
+    web3auth.current = new Web3Auth(WebBrowser, EncryptedStorage, {
+      clientId: "BDj1toq1N1xYgDIJ00ADR-QPJ71ESzJcB3ijVHP1TsIX7nsx_lu6uLoJQMPze1vpGDt--Ew95RGxz-RgOh1tcxM",
+      network: OPENLOGIN_NETWORK.TESTNET,
+    });
+    web3auth.current.sessionResponse.on("login", function(state: State) {
+      setKey(state.privKey || "no key");
+      setUserInfo(state);
+    });
+  }, []);
+
   const login = async () => {
     try {
-      const web3auth = new Web3Auth(WebBrowser, {
-        clientId:
-          'BA0mVyeHATikwuXVhXWCNjAxHthlw0w84mUhLuxlC4KZKjvmBsbdbmEWTizJ26YzrbKSWbOZbtGYdVDm0ESuYSg',
-        network: OPENLOGIN_NETWORK.TESTNET,
-      });
-      const state = await web3auth.login({
+      const state = await web3auth.current.login({
         loginProvider: LOGIN_PROVIDER.GOOGLE,
         redirectUrl: resolvedRedirectUrl,
       });
-      setKey(state.privKey || 'no key');
+      setKey(state.privKey || "no key");
       setUserInfo(state);
     } catch (e) {
       console.error(e);
       setErrorMsg(String(e));
     }
   };
+  
   return (
     <View style={styles.container}>
       {key !== '' ? <Text>Key: {key}</Text> : null}

example_general/App.tsx

@@ -10,10 +10,11 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "dependencies": {
+    "@toruslabs/react-native-web-browser": "^1.0.1",
+    "@web3auth/react-native-sdk": "file:../",
     "react": "18.1.0",
     "react-native": "0.70.1",
-    "@toruslabs/react-native-web-browser": "^1.0.1",
-    "@web3auth/react-native-sdk": "file:../"
+    "react-native-encrypted-storage": "^4.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",