Merge pull request #47 from DIMO-Network/development

v0.0.16

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.15.tgz",
+    "@dimo-network/login-with-dimo": "file:./dimo-network-login-with-dimo-0.0.16.tgz",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",

example-dimo-auth/src/App.tsx

@@ -13,22 +13,22 @@ import { sampleAbi } from "./abi/sample-abi";
 function App() {
   const [permissionsEnabled, setPermissionsEnabled] = useState(false);
   const [vehicleFilteringEnabled, setVehicleFilteringEnabled] = useState(false);
+  const [forceEmail, setForceEmail] = useState(false);
   const { isAuthenticated, getValidJWT, email, getEmail, walletAddress } =
     useDimoAuthState();
 
   const sampleExpirationDate = new Date(Date.UTC(2025, 11, 11, 18, 51)); // Note: Month is zero-based
 
-  // Toggle handler
-  const handleToggle = () => {
-    setPermissionsEnabled(!permissionsEnabled);
-  };
 
   initializeDimoSDK({
     clientId: process.env.REACT_APP_DIMO_CLIENT_ID!,
     redirectUri: process.env.REACT_APP_DIMO_REDIRECT_URI!,
     environment: process.env.REACT_APP_DIMO_ENV! as
       | "production"
       | "development",
+    options: {
+      forceEmail,
+    },
   });
 
   return (
@@ -43,12 +43,23 @@ function App() {
             <input
               type="checkbox"
               checked={permissionsEnabled}
-              onChange={handleToggle}
+              onChange={()=>setPermissionsEnabled(!permissionsEnabled)}
             />
             Enable Permissions
           </label>
         </div>
 
+        <div>
+          <label>
+            <input
+              type="checkbox"
+              checked={forceEmail}
+              onChange={()=>setForceEmail(!forceEmail)}
+            />
+            Force Email
+          </label>
+        </div>        
+
         {isAuthenticated && (
           <div>
             <p>Connected User</p>

sdk/README.md

@@ -33,6 +33,19 @@ import {
   });
 ```
 
+In addition to setting the dev credentials/environments, you can also set global options.
+
+We currently support the `forceEmail` option, which means - anytime a user will be on a register/login page, they will be forced to check the email box before registering
+
+```
+  initializeDimoSDK({
+    ...
+    options: {
+      forceEmail: true, //BY DEFAULT, this is False - users won't have to share email
+    },
+  });
+```
+
 ### The Dimo Auth Provider
 
 The Dimo Auth Provider is used to get values of an authenticated state from the SDK. This includes, a boolean "authenticated" property, a method to get the currently valid JWT, an email property, a method to get email, and the wallet address
@@ -57,6 +70,16 @@ const { isAuthenticated, getValidJWT, getEmail, email, walletAddress } = useDimo
 
 Based on this authenticated state, you can render the necessary Dimo components
 
+### The Separate DIMO Modes
+
+With the DIMO SDK, developers have the ability to control how their users interact with DIMO.
+
+We offer three options
+- Popup Mode (best for allowing users to see both the app, as well as DIMO)
+- Embed Mode (best for keeping the dimo login within a developers app)
+  - NOTE: Apple SSO will not work in Embed Mode
+- Redirect Mode (best for developers that want to avoid popups, or embedding)
+
 ### Using the Button Components
 
 The following example shows all buttons being rendered, with no auth state checking

sdk/package.json

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

sdk/src/auth/popupAuth.ts

@@ -8,7 +8,7 @@ export const popupAuth = (
   data?: Record<string, any> // Component-specific data
 ) => {
   try {
-    const { entryState, onSuccess, onError, setAuthenticated, dimoLogin } = basePayload;
+    const { dimoLogin } = basePayload;
     const popup = window.open(
       dimoLogin,
       "_blank",

sdk/src/auth/redirectAuth.ts

@@ -5,14 +5,18 @@ import { TransactionData } from "../types/TransactionData";
 export const redirectAuth = (payload: BasePayload, data?: any) => {
   //TODO: Can probably be cleaned up to prevent having to manually parse out everything
 
-  const { clientId, redirectUri,  entryState,  dimoLogin } = payload;
+  const { clientId, redirectUri, entryState, dimoLogin, forceEmail } = payload;
 
-  const { permissionTemplateId, vehicles, vehicleMakes, expirationDate, transactionData } = data;
+  const {
+    permissionTemplateId,
+    vehicles,
+    vehicleMakes,
+    expirationDate,
+    transactionData,
+  } = data;
 
   const params = new URLSearchParams();
 
-
-
   if (clientId) params.append("clientId", clientId);
   if (redirectUri) params.append("redirectUri", redirectUri);
   if (permissionTemplateId)
@@ -28,7 +32,7 @@ export const redirectAuth = (payload: BasePayload, data?: any) => {
     );
   }
 
-  if ( expirationDate ) {
+  if (expirationDate) {
     params.append("expirationDate", expirationDate);
   }
 
@@ -47,6 +51,11 @@ export const redirectAuth = (payload: BasePayload, data?: any) => {
     }
   }
 
+  // Use forceEmail from payload
+  if (forceEmail) {
+    params.append("forceEmail", "true");
+  }
+
   // Construct the full URL
   window.location.href = `${dimoLogin}?${params.toString()}`;
 };

sdk/src/components/BaseDimoButton.tsx

@@ -34,7 +34,7 @@ const BaseDimoButton: React.FC<BaseDimoButtonProps> = ({
   disableIfAuthenticated = false,
   payload,
 }) => {
-  const { clientId, redirectUri, apiKey, environment } = getDimoConfig();
+  const { clientId, redirectUri, apiKey, environment, options } = getDimoConfig();
 
   //DimoAuthProvider contexts, the following can only be used when the component using them is wrapped in a <DimoAuthProvider/>
   const { isAuthenticated } = useDimoAuthState();
@@ -54,6 +54,7 @@ const BaseDimoButton: React.FC<BaseDimoButtonProps> = ({
     clientId,
     redirectUri,
     apiKey,
+    forceEmail: options?.forceEmail ?? false, // Ensure it's always present
   };
 
   const handleButtonClick = () => {

sdk/src/config/sdkConfig.ts

@@ -3,23 +3,31 @@ let sdkConfig: {
   redirectUri: string;
   apiKey?: string;
   environment?: "development" | "production";
+  options?: {
+    forceEmail?: boolean;
+    // Add more options here in the future, for properties that need to be global
+  };
 } = {
   clientId: "",
-  redirectUri: ""
+  redirectUri: "",
 };
 
 export const initializeDimoSDK = ({
   clientId,
   redirectUri,
   apiKey = "some_api_key",
   environment = "production",
+  options = {}, // ✅ Default to an empty object to prevent undefined issues
 }: {
   clientId: string;
   redirectUri: string;
   apiKey?: string;
   environment?: "development" | "production";
+  options?: {
+    forceEmail?: boolean;
+  };
 }) => {
-  sdkConfig = { clientId, redirectUri, apiKey, environment };
+  sdkConfig = { clientId, redirectUri, apiKey, environment, options };
 };
 
 export const getDimoConfig = () => {
@@ -29,4 +37,4 @@ export const getDimoConfig = () => {
     );
   }
   return sdkConfig;
-};
+};

sdk/src/types/BasePayload.ts

@@ -10,6 +10,7 @@ export interface BasePayload {
   onError: (error: Error) => void;
   setAuthenticated: React.Dispatch<React.SetStateAction<boolean>>;
   dimoLogin: string;
+  forceEmail: boolean;
   clientId?: string;
   redirectUri?: string;
   apiKey?: string; // Avoid sending API key in the URL

sdk/src/utils/eventHandler.ts

@@ -57,6 +57,7 @@ export const handleMessageForPopup = (
     clientId,
     redirectUri,
     apiKey,
+    forceEmail
   } = basePayload;
 
   const popupListener = (event: MessageEvent) => {
@@ -79,6 +80,7 @@ export const handleMessageForPopup = (
           redirectUri,
           apiKey,
           entryState,
+          forceEmail,
           eventType: MessageEventType.AUTH_INIT,
         };
         sendMessageToTarget(popup, initialMessage, expectedOrigin, onError);
@@ -126,6 +128,7 @@ export const handleMessageForEmbed = (basePayload: BasePayload, data: any) => {
     redirectUri,
     apiKey,
     dimoLogin,
+    forceEmail
   } = basePayload;
 
   const embedListener = (event: MessageEvent) => {
@@ -151,6 +154,7 @@ export const handleMessageForEmbed = (basePayload: BasePayload, data: any) => {
           redirectUri,
           apiKey,
           entryState,
+          forceEmail,
           eventType: MessageEventType.AUTH_INIT,
         };
         //@ts-ignore