🔄 synced local 'examples/' with remote 'examples/'

examples/js-example/index.html

@@ -37,7 +37,15 @@
         <label class="label">Challenge Id</label>
         <input id="challengeId" />
       </div>
+      <div class="row">
+        <label class="label">User Secret (For SSO)</label>
+        <input id="userSecret" />
+      </div>
       <br />
+      <div>
+        <label className="label">Show SSO UI</label>
+        <input type="checkbox" id="disableConfirmationUI" />
+      </div>
       <button id="verifyButton">Verify Challenge</button>
     </div>
   </body>

examples/js-example/src/index.js

@@ -12,6 +12,9 @@ $(document).ready(function () {
       userToken: $('#userToken').val(),
       encryptionKey: $('#encryptionKey').val(),
     })
+    sdk.setSsoSettings({
+      disableConfirmationUI: $('#disableConfirmationUI')[0].checked,
+    })
 
     // If you want to customize the UI, you can uncomment & use the following code.
     // sdk.setLocalizations({
@@ -60,6 +63,29 @@ $(document).ready(function () {
     //   1
     // )
 
+    if (userSecret !== '') {
+      sdk.executeWithUserSecret($('#challengeId').val(), $('#userSecret').val(), (error, result) => {
+        if (error) {
+          console.log(
+            `${error?.code?.toString() || 'Unknown code'}: ${
+              error?.message ?? 'Error!'
+            }`
+          )
+
+          return
+        }
+
+        console.log(`Challenge: ${result.type}`)
+        console.log(`status: ${result.status}`)
+
+        if (result.data) {
+          console.log(`signature: ${result.data?.signature}`)
+        }
+      })
+
+      return
+    }
+
     sdk.execute($('#challengeId').val(), (error, result) => {
       if (error) {
         console.log(

examples/react-example/src/App.js

@@ -12,6 +12,8 @@ function App() {
   const [userToken, setUserToken] = useState()
   const [encryptionKey, setEncryptionKey] = useState()
   const [challengeId, setChallengeId] = useState()
+  const [userSecret, setUserSecret] = useState()
+  const [disableConfirmationUI, setDisableConfirmationUI] = useState()
 
   const onAppIdChange = useCallback((e) => {
     setAppId(e.target.value)
@@ -25,6 +27,13 @@ function App() {
   const onChallengeIdChange = useCallback((e) => {
     setChallengeId(e.target.value)
   }, [])
+  const onUserSecretChange = useCallback((e) => {
+    setUserSecret(e.target.value)
+  }, [])
+
+  const onToggleChange = useCallback((e) => {
+    setDisableConfirmationUI(!e.target.value)
+  }, [])
 
   const onSubmit = useCallback(() => {
     sdk.setAppSettings({
@@ -34,6 +43,9 @@ function App() {
       userToken,
       encryptionKey,
     })
+    sdk.setSsoSettings({
+      disableConfirmationUI,
+    })
 
     // If you want to customize the UI, you can uncomment & use the following code.
     // sdk.setLocalizations({
@@ -82,6 +94,29 @@ function App() {
     //   1
     // )
 
+    if (userSecret !== '') {
+      sdk.executeWithUserSecret(challengeId, userSecret, (error, result) => {
+        if (error) {
+          console.log(
+            `${error?.code?.toString() || 'Unknown code'}: ${
+              error?.message ?? 'Error!'
+            }`
+          )
+
+          return
+        }
+
+        console.log(`Challenge: ${result.type}`)
+        console.log(`status: ${result.status}`)
+
+        if (result.data) {
+          console.log(`signature: ${result.data?.signature}`)
+        }
+      })
+
+      return
+    }
+
     sdk.execute(challengeId, (error, result) => {
       if (error) {
         console.log(
@@ -124,7 +159,16 @@ function App() {
         <br />
         <input onChange={onChallengeIdChange} value={challengeId} />
       </div>
+      <div className="row">
+        <label className="label">User Secret (For SSO)</label>
+        <br />
+        <input onChange={onUserSecretChange} value={userSecret} />
+      </div>
       <br />
+      <div>
+        <label className="label">Show SSO UI</label>
+        <input type="checkbox" onChange={(e) => onToggleChange(e)} value={false} />
+      </div>
       <button onClick={onSubmit}>Verify Challenge</button>
     </div>
   )

examples/vue-example/src/App.vue

@@ -12,6 +12,8 @@ const appId = ref('')
 const userToken = ref('')
 const encryptionKey = ref('')
 const challengeId = ref('')
+const userSecret = ref('')
+const disableConfirmationUI = ref('')
 
 function onSubmit() {
   sdk.setAppSettings({
@@ -21,6 +23,9 @@ function onSubmit() {
     userToken: userToken.value,
     encryptionKey: encryptionKey.value,
   })
+  sdk.setSsoSettings({
+    disableConfirmationUI: disableConfirmationUI.value,
+  })
 
   // If you want to customize the UI, you can uncomment & use the following code.
   // sdk.setLocalizations({
@@ -69,6 +74,29 @@ function onSubmit() {
   //   1
   // )
 
+    if (userSecret.value !== '') {
+      sdk.executeWithUserSecret(challengeId.value, userSecret.value, (error, result) => {
+        if (error) {
+          console.log(
+            `${error?.code?.toString() || 'Unknown code'}: ${
+              error?.message ?? 'Error!'
+            }`
+          )
+
+          return
+        }
+
+        console.log(`Challenge: ${result.type}`)
+        console.log(`status: ${result.status}`)
+  
+        if (result.data) {
+          console.log(`signature: ${result.data?.signature}`)
+        }
+      })
+
+      return
+    }
+
   sdk.execute(challengeId.value, (error, result) => {
     if (error) {
       console.log(
@@ -111,7 +139,15 @@ function onSubmit() {
       <label className="label">Challenge Id</label>
       <input v-model="challengeId" />
     </div>
+    <div className="row">
+      <label className="label">User Secret (For SSO)</label>
+      <input v-model="userSecret" />
+    </div>
     <br />
+    <div>
+      <label className="label">Show SSO UI</label>
+      <input type="checkbox" v-model="disableConfirmationUI" />
+    </div>
     <button @click="onSubmit">Verify Challenge</button>
   </div>
 </template>