Merge pull request #35 from DIMO-Network/development

v0.0.11: Logout Support, Use Types, Cleanup Label #34

LICENSE

@@ -175,18 +175,7 @@
 
    END OF TERMS AND CONDITIONS
 
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
+   Copyright (c) 2024 DIMO-Network
 
    Licensed under the Apache License, Version 2.0 (the "License");
    you may not use this file except in compliance with the License.
@@ -199,3 +188,4 @@
    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
    See the License for the specific language governing permissions and
    limitations under the License.
+

example-dimo-auth/package.json

@@ -10,7 +10,7 @@
     "@types/node": "^16.18.114",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.1",
-    "@dimo-network/login-with-dimo": "file:./dimo-network-login-with-dimo-0.0.10.tgz",
+    "@dimo-network/login-with-dimo": "file:./dimo-network-login-with-dimo-0.0.11.tgz",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

example-dimo-auth/src/App.tsx

@@ -1132,7 +1132,15 @@ function App() {
         <div>
           <h3>Popup Example</h3>
 
-          {isAuthenticated ? (
+          <LoginWithDimo
+            mode="popup"
+            onSuccess={(authData: any) => console.log("Success:", authData)}
+            onError={(error: any) => console.error("Error:", error)}
+            permissionTemplateId={permissionsEnabled ? "1" : undefined}
+            // vehicles={["585","586"]}
+          />
+
+          {isAuthenticated && (
             <>
               <ShareVehiclesWithDimo
                 mode="popup"
@@ -1143,8 +1151,11 @@ function App() {
 
               <ExecuteAdvancedTransactionWithDimo
                 mode="popup"
-                onSuccess={(transactionHash: any) =>
-                  console.log("Success:", transactionHash)
+                onSuccess={(transactionData: any) =>
+                  console.log(
+                    "Transaction Hash:",
+                    transactionData.transactionHash
+                  )
                 }
                 onError={(error: any) => console.error("Error:", error)}
                 address="0x21cFE003997fB7c2B3cfe5cf71e7833B7B2eCe10"
@@ -1154,14 +1165,6 @@ function App() {
                 args={["0x62b98e019e0d3e4A1Ad8C786202e09017Bd995e1", "0"]}
               />
             </>
-          ) : (
-            <LoginWithDimo
-              mode="popup"
-              onSuccess={(authData: any) => console.log("Success:", authData)}
-              onError={(error: any) => console.error("Error:", error)}
-              permissionTemplateId={permissionsEnabled ? "1" : undefined}
-              // vehicles={["585","586"]}
-            />
           )}
         </div>
 
@@ -1195,7 +1198,9 @@ function App() {
 
           <ExecuteAdvancedTransactionWithDimo
             mode="redirect"
-            onSuccess={(authData: any) => console.log("Success:", authData)}
+            onSuccess={(transactionData: any) =>
+              console.log("Transaction Hash:", transactionData.transactionHash)
+            }
             onError={(error: any) => console.error("Error:", error)}
             address="0x21cFE003997fB7c2B3cfe5cf71e7833B7B2eCe10"
             value="0"

sdk/README.md

@@ -87,7 +87,7 @@ import {
 
         <ExecuteAdvancedTransactionWithDimo
           mode="popup"
-          onSuccess={(transactionHash: any) =>
+          onSuccess={(transactionData: any) =>
             console.log("Success:", transactionHash)
           }
           onError={(error: any) => console.error("Error:", error)}
@@ -146,8 +146,8 @@ initializeDimoSDK({
 
   <ExecuteAdvancedTransactionWithDimo
     mode="popup"
-    onSuccess={(transactionHash: any) =>
-      console.log("Success:", transactionHash)
+    onSuccess={(transactionData: any) =>
+      console.log("Transaction Hash:", transactionData.transactionHash)
     }
     onError={(error: any) => console.error("Error:", error)}
     address="0x21cFE003997fB7c2B3cfe5cf71e7833B7B2eCe10"

sdk/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dimo-network/login-with-dimo",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

sdk/src/components/LoginWithDimo.tsx

@@ -26,9 +26,9 @@ const LoginWithDimo: React.FC<LoginWithDimoProps> = ({
       onSuccess={onSuccess}
       onError={onError}
       buttonLabel={(authenticated) =>
-        authenticated ? "Connected with DIMO" : "Continue with DIMO"
+        authenticated ? "Manage DIMO Account" : "Continue with DIMO"
       } // Dynamic label based on auth state
-      disableIfAuthenticated={true} // Disable button when authenticated
+      disableIfAuthenticated={false} // Disable button when authenticated
       payload={{ permissionTemplateId, vehicles, vehicleMakes, eventType: "SHARE_VEHICLES_DATA" }}
     />
   );

sdk/src/enums/globalEnums.ts

@@ -11,6 +11,8 @@ export enum EntryState {
 export enum MessageEventType {
     READY = "READY",
     AUTH_INIT = "AUTH_INIT",
+    TRANSACTION_RESPONSE = "transactionResponse",
+    LOGOUT = "logout"
 }
 
 export enum DimoSDKModes {

sdk/src/storage/storageManager.ts

@@ -42,3 +42,9 @@ export const getEmailFromLocalStorage = (): string | null => {
   const email = localStorage.getItem("dimo_user_email");
   return email;
 };
+
+export const clearSessionData = (): void => {
+  document.cookie = `dimo_auth_token=; Max-Age=0`; // Expire JWT cookie immediately
+  localStorage.removeItem(`dimo_wallet_address`); // Remove user data from localStorage
+  localStorage.removeItem(`dimo_user_email`); // Remove user data from localStorage
+};

sdk/src/utils/authUtils.ts

@@ -0,0 +1,29 @@
+import {
+    clearSessionData,
+  storeEmailInLocalStorage,
+  storeJWTInCookies,
+  storeWalletAddressInLocalStorage,
+} from "../storage/storageManager";
+
+export const processAuthResponse = (
+  { token, walletAddress, email }: any,
+  setAuthenticated: (status: boolean) => void,
+  onSuccess: (data: {
+    token: string;
+    transactionHash?: string;
+    transactionReceipt?: any;
+  }) => void
+) => {
+  if (walletAddress) storeWalletAddressInLocalStorage(walletAddress);
+  if (email) storeEmailInLocalStorage(email);
+  if (token) {
+    storeJWTInCookies(token);
+    setAuthenticated(true);
+    onSuccess({ token });
+  }
+};
+
+export const logout = (setAuthenticated: (status: boolean) => void) => {
+    clearSessionData();
+    setAuthenticated(false);
+};

sdk/src/utils/eventHandler.ts

@@ -1,11 +1,6 @@
-import { EntryState } from "../enums/globalEnums";
-import {
-  storeEmailInLocalStorage,
-  storeJWTInCookies,
-  storeWalletAddressInLocalStorage,
-} from "../storage/storageManager";
+import { MessageEventType } from "../enums/globalEnums";
 import { BasePayload } from "../types/BasePayload";
-import { TransactionData } from "../types/TransactionData";
+import { logout, processAuthResponse } from "./authUtils";
 
 /**
  * @file eventHandler.ts
@@ -47,24 +42,6 @@ const sendMessageToTarget = (
   }
 };
 
-const processAuthResponse = (
-  { token, walletAddress, email }: any,
-  setAuthenticated: (status: boolean) => void,
-  onSuccess: (data: {
-    token: string;
-    transactionHash?: string;
-    transactionReceipt?: any;
-  }) => void
-) => {
-  if (walletAddress) storeWalletAddressInLocalStorage(walletAddress);
-  if (email) storeEmailInLocalStorage(email);
-  if (token) {
-    storeJWTInCookies(token);
-    setAuthenticated(true);
-    onSuccess({ token });
-  }
-};
-
 // Popup Handler
 export const handleMessageForPopup = (
   basePayload: BasePayload,
@@ -96,13 +73,13 @@ export const handleMessageForPopup = (
     } = event.data;
 
     if (mode === "popup") {
-      if (eventType === "READY") {
+      if (eventType === MessageEventType.READY) {
         const initialMessage = {
           clientId,
           redirectUri,
           apiKey,
           entryState,
-          eventType: "AUTH_INIT",
+          eventType: MessageEventType.AUTH_INIT,
         };
         sendMessageToTarget(popup, initialMessage, expectedOrigin, onError);
       }
@@ -121,10 +98,14 @@ export const handleMessageForPopup = (
         if (popup && !popup.closed) popup.close();
       }
 
-      if (eventType === "transactionResponse" && transactionHash) {
+      if (eventType === MessageEventType.TRANSACTION_RESPONSE && transactionHash) {
         onSuccess({ token: "", transactionHash });
       }
 
+      if (eventType === MessageEventType.LOGOUT) {
+        logout(setAuthenticated);
+      }
+
       if (eventType === "DIMO_ERROR") {
         onError(new Error(message));
       }
@@ -165,13 +146,13 @@ export const handleMessageForEmbed = (basePayload: BasePayload, data: any) => {
     } = event.data;
 
     if (mode === "embed") {
-      if (eventType === "READY") {
+      if (eventType === MessageEventType.READY) {
         const initialMessage = {
           clientId,
           redirectUri,
           apiKey,
           entryState,
-          eventType: "AUTH_INIT",
+          eventType: MessageEventType.AUTH_INIT,
         };
         //@ts-ignore
         sendMessageToTarget(iframe?.contentWindow, initialMessage, dimoLogin, onError);
@@ -189,14 +170,18 @@ export const handleMessageForEmbed = (basePayload: BasePayload, data: any) => {
         onSuccess
       );
 
-      if (eventType === "transactionResponse") {
+      if (eventType === MessageEventType.TRANSACTION_RESPONSE) {
         if (transactionHash || transactionReceipt) {
           onSuccess({ token: "", transactionHash, transactionReceipt });
         } else {
           onError(new Error("Could not execute transaction"));
         }
       }
 
+      if (eventType === MessageEventType.LOGOUT) {
+        logout(setAuthenticated);
+      }      
+
       if (eventType === "DIMO_ERROR") {
         onError(new Error(message));
       }