Improve auth workflow for safari

Safari doesn't support mixed content
mockoon · Aug 6, 2024 · 9319c85 · 9319c85
1 parent 726913e
commit 9319c85
Showing 1 changed file with 14 additions and 10 deletions.
diff --git a/pages/app-auth.tsx b/pages/app-auth.tsx
@@ -23,6 +23,7 @@ const AppAuth = function () {
   } = useAuth();
   const router = useRouter();
   const [callbackWorkflow, setCallbackWorkflow] = useState(false);
+  const [tokenStore, setTokenStore] = useState(null);
 
   const {
     mutate: appCallback,
@@ -43,6 +44,10 @@ const AppAuth = function () {
     },
     onSuccess: async () => {
       localStorage.removeItem('authCallback');
+    },
+    onError: async (error, context) => {
+      // old workflow < 9.0.0, using custom protocol
+      window.location.assign(`mockoon://auth?token=${tokenStore}`);
     }
   });
 
@@ -75,6 +80,9 @@ const AppAuth = function () {
       });
     },
     onSuccess: async (data) => {
+      setTokenStore(data.token);
+
+      // not safari
       if (localStorage.getItem('authCallback')) {
         // new workflow >= 9.0.0, using localhost callback
         setCallbackWorkflow(true);
@@ -127,13 +135,18 @@ const AppAuth = function () {
                 )}
                 {isGetTokenSuccess && (
                   <>
-                    {!callbackWorkflow && (
+                    {/* old workflow, and new workflow when the callback fails */}
+                    {(!callbackWorkflow ||
+                      (callbackWorkflow &&
+                        isAppCallbackError &&
+                        !isAppCallbackPending)) && (
                       <div className='alert alert-success mt-6 fs-5'>
                         <i className='icon-check me-2'></i>
                         <span className='fw-bold'>Success! </span> You should
                         now be redirected to the app.
                       </div>
                     )}
+                    {/* new callback workflow */}
                     {callbackWorkflow &&
                       isAppCallbackSuccess &&
                       !isAppCallbackPending && (
@@ -144,15 +157,6 @@ const AppAuth = function () {
                           application.
                         </div>
                       )}
-                    {callbackWorkflow &&
-                      isAppCallbackError &&
-                      !isAppCallbackPending && (
-                        <div className='alert alert-warning mt-6 fs-5'>
-                          An error occured while trying to log you in to the
-                          desktop application. Please copy the token below and
-                          enter it manually in the application.
-                        </div>
-                      )}
                     <p className='mt-6'>
                       If anything goes wrong, you can copy this token and enter
                       it manually in the desktop application: