🐭 Add better siwe account holders and useCallbacks for functions (#813)

* Add useCallbacks and better session holder * Create siwe-session-improvements.md Co-authored-by: mateusz <[email protected]>
TrueFiEng · Jun 7, 2022 · 1c987ba · 1c987ba · github-actions · Jun 7, 2022
1 parent edfd60b
commit 1c987ba
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 14 deletions.
diff --git a/.changeset/siwe-session-improvements.md b/.changeset/siwe-session-improvements.md
@@ -0,0 +1,5 @@
+---
+"@usedapp/siwe": patch
+---
+
+🐭 Add better siwe account holders and useCallbacks for functions
diff --git a/packages/siwe/src/provider.tsx b/packages/siwe/src/provider.tsx
@@ -1,5 +1,5 @@
 import { useEthers } from '@usedapp/core'
-import React, { useEffect, ReactNode, useState } from 'react'
+import React, { useEffect, ReactNode, useState, useCallback } from 'react'
 import { createContext, useContext } from 'react'
 import { SiweMessage } from 'siwe'
 import { SiweFetchers, getFetchers } from './requests'
@@ -40,14 +40,17 @@ export const SiweProvider = ({ children, backendUrl, api }: SiweProviderProps) =
   const [authToken, setAuthToken] = useState<string | undefined | null>(undefined)
 
   useEffect(() => {
-    setAuthToken(localStorage.getItem('authToken'))
+    if (!account || !chainId) {
+      return
+    }
+    setAuthToken(localStorage.getItem('authToken' + account + chainId))
     if (authToken === null) {
       return
     }
-    void getAuth().then((res) => (res.loggedIn ? setLoggedIn(true) : undefined))
-  }, [authToken, getAuth])
+    void getAuth(account, chainId).then((res) => (res.loggedIn ? setLoggedIn(true) : undefined))
+  }, [authToken, getAuth, account, chainId])
 
-  const signIn = async (signInOptions?: SignInOptions) => {
+  const signIn = useCallback(async(signInOptions?: SignInOptions) => {
     if (!account || !chainId || !library) {
       return
     }
@@ -71,17 +74,20 @@ export const SiweProvider = ({ children, backendUrl, api }: SiweProviderProps) =
 
     const session = JSON.stringify({ signature, message })
 
-    localStorage.setItem('authToken', session)
+    localStorage.setItem('authToken' + account + chainId, session)
     setAuthToken(session)
 
-    void getAuth().then((res) => (res.loggedIn ? setLoggedIn(true) : undefined))
-  }
+    void getAuth(account, chainId).then((res) => (res.loggedIn ? setLoggedIn(true) : undefined))
+  }, [account, chainId, library, getAuth, setAuthToken, getNonce])
 
-  const signOut = async () => {
-    localStorage.removeItem('authToken')
+  const signOut = useCallback(async () => {
+    if (!account || !chainId) {
+      return
+    }
+    localStorage.removeItem('authToken' + account + chainId)
     setLoggedIn(false)
     setAuthToken(undefined)
-  }
+  }, [setLoggedIn, setAuthToken, account, chainId])
 
   const value = {
     signIn,

diff --git a/packages/siwe/src/requests.tsx b/packages/siwe/src/requests.tsx
@@ -12,7 +12,7 @@ export interface AuthResponse {
 
 export interface SiweFetchers {
   getNonce: () => Promise<NonceResponse>
-  getAuth: () => Promise<AuthResponse>
+  getAuth: (account: string, chainId: number) => Promise<AuthResponse>
 }
 
 const failedAuthResponse = {
@@ -27,8 +27,8 @@ const failedNonceResponse = {
 
 export const getFetchers = (backendUrl: string): SiweFetchers => {
   return {
-    getAuth: async () => {
-      const token = localStorage.getItem('authToken')
+    getAuth: async (account: string, chainId: number) => {
+      const token = localStorage.getItem('authToken' + account + chainId)
 
       if (token === undefined || token === null) {
         return failedAuthResponse