feat(website): login by redirect state (#415)

riccardoperra · Dec 13, 2022 · 72ad2cf · 72ad2cf
1 parent a86725f
commit 72ad2cf
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 38 deletions.
diff --git a/apps/codeimage/src/index.tsx b/apps/codeimage/src/index.tsx
@@ -73,6 +73,7 @@ const NotFoundPage = lazyWithNoLauncher(
 export function Bootstrap() {
   getRootEditorStore();
   const [, {locale}] = useI18n();
+  const auth0 = getAuth0State();
   createEffect(on(() => uiStore.locale, locale));
   const mode = () => uiStore.themeMode;
 
@@ -101,6 +102,16 @@ export function Bootstrap() {
       data: ({navigate}) => navigate('/'),
       component: Dashboard,
     },
+    {
+      path: 'login',
+      data: ({navigate}) => {
+        if (auth0.loggedIn()) {
+          navigate('/');
+        } else {
+          auth0.login();
+        }
+      },
+    },
     {
       path: '/*all',
       data: ({navigate}) => navigate('/404'),

diff --git a/apps/website/src/components/Header/Header.tsx b/apps/website/src/components/Header/Header.tsx
@@ -1,4 +1,5 @@
 import {Button, SvgIcon, SvgIconProps} from '@codeimage/ui';
+import {A} from '@solidjs/router';
 import {assignInlineVars} from '@vanilla-extract/dynamic';
 import {createMemo, createSignal, onCleanup, onMount} from 'solid-js';
 import {mainWebsiteLink} from '~/core/constants';
@@ -41,8 +42,10 @@ export function Header() {
           <div class={styles.headerActions}>
             <Button
               variant="solid"
+              as={A}
+              link={true}
+              href={`${mainWebsiteLink}/login`}
               theme="secondary"
-              onClick={ui.login}
               leftIcon={<GithubIcon />}
               class={styles.loginButton}
               title={'Login'}

diff --git a/apps/website/src/core/hydration/schedule.ts b/apps/website/src/core/hydration/schedule.ts
@@ -0,0 +1,19 @@
+export function runOnIdle<T>(
+  fn: () => T,
+  timeout: number,
+  tryWithNativeScheduler: boolean,
+): Promise<T> {
+  // https://developer.mozilla.org/en-US/docs/Web/API/Window/scheduler
+  if (tryWithNativeScheduler && 'scheduler' in window) {
+    // @ts-expect-error Not present in current types
+    return scheduler.postTask(() => fn());
+  }
+  return new Promise<T>(r => {
+    const cb = () => r(fn());
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(cb, {timeout: timeout ?? undefined});
+    } else {
+      setTimeout(cb, timeout);
+    }
+  });
+}
diff --git a/apps/website/src/core/hydration/strategy.ts b/apps/website/src/core/hydration/strategy.ts
@@ -1,14 +1,12 @@
+import {runOnIdle} from '~/core/hydration/schedule';
+
 export type HydrateOnIdleProps = {
   timeout?: number;
 };
 
 export function onIdle(onHydrate: () => void, options: HydrateOnIdleProps) {
   const {timeout = 200} = options;
-  if ('requestIdleCallback' in window) {
-    window.requestIdleCallback(onHydrate, {timeout});
-  } else {
-    setTimeout(onHydrate, timeout);
-  }
+  return runOnIdle(onHydrate, timeout, false);
 }
 
 export function onLoad(onHydrate: () => void) {

diff --git a/apps/website/src/ui.ts b/apps/website/src/ui.ts
@@ -1,7 +1,7 @@
 import {Auth0Client, User} from '@auth0/auth0-spa-js';
 import {createRoot, createSignal, onMount} from 'solid-js';
 import {createStore} from 'solid-js/store';
-import {mainWebsiteLink} from '~/core/constants';
+import {runOnIdle} from '~/core/hydration/schedule';
 
 interface GlobalUiStore {
   navColor: string | undefined;
@@ -15,44 +15,38 @@ export function $createUIStore() {
   });
 
   onMount(() => {
-    import('@auth0/auth0-spa-js').then(async ({createAuth0Client}) => {
-      const auth0Client = await createAuth0Client({
-        domain: import.meta.env.VITE_PUBLIC_AUTH0_DOMAIN,
-        clientId: import.meta.env.VITE_PUBLIC_AUTH0_CLIENT_ID,
-        authorizationParams: {
-          audience: import.meta.env.VITE_PUBLIC_AUTH0_AUDIENCE,
-        },
-        cookieDomain: 'codeimage.dev',
-        cacheLocation: 'localstorage',
-      });
-      setAuth(() => auth0Client);
-      const authValue = auth();
-      if (authValue) {
-        authValue
-          .getUser()
-          .then(user => setUser(user))
-          .catch(() => setUser(null));
-      }
-    });
-  });
-
-  const login = () => {
-    const authValue = auth();
-    if (!authValue) window.location.replace(mainWebsiteLink);
-    return authValue.loginWithRedirect({
-      authorizationParams: {
-        redirect_uri: mainWebsiteLink,
-        connection: 'github',
+    runOnIdle(
+      () => {
+        import('@auth0/auth0-spa-js').then(async ({createAuth0Client}) => {
+          const auth0Client = await createAuth0Client({
+            domain: import.meta.env.VITE_PUBLIC_AUTH0_DOMAIN,
+            clientId: import.meta.env.VITE_PUBLIC_AUTH0_CLIENT_ID,
+            authorizationParams: {
+              audience: import.meta.env.VITE_PUBLIC_AUTH0_AUDIENCE,
+            },
+            cookieDomain: 'codeimage.dev',
+            cacheLocation: 'localstorage',
+          });
+          setAuth(() => auth0Client);
+          const authValue = auth();
+          if (authValue) {
+            authValue
+              .getUser()
+              .then(user => setUser(user))
+              .catch(() => setUser(null));
+          }
+        });
       },
-    });
-  };
+      200,
+      true,
+    );
+  });
 
   return {
     value: store,
     set: setStore,
     auth,
     user,
-    login,
   };
 }