[WIP] Better error handling on password reset recipe

components/common/Error.tsx

@@ -0,0 +1,44 @@
+import { StytchSDKAPIError } from '@stytch/vanilla-js';
+import React from 'react';
+
+type Props = {
+  error: any;
+  title: string;
+  content: string | JSX.Element;
+};
+function Error({ error, title }: Props) {
+  const errorString = error.toString();
+  console.log(errorString);
+
+  return (
+    <div style={styles.container}>
+      <div style={styles.card}>
+        <h3>{title}</h3>
+        <div>
+          <p>Details</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    padding: '0px 48px',
+  },
+  card: {
+    width: '100%',
+    padding: '24px 32px',
+    border: '1px solid rgb(173, 188, 197)',
+    borderRadius: '8px',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    backgroundColor: 'white',
+  },
+};
+
+export default Error;

pages/_app.tsx

@@ -18,10 +18,21 @@ function MyApp({ Component, pageProps }: AppProps) {
       </Head>
 
       <StytchProvider stytch={stytch}>
-        <NavBar />
-        <Component {...pageProps} />
+        <div style={styles.container}>
+          <NavBar />
+          <Component {...pageProps} />
+        </div>
       </StytchProvider>
     </>
   );
 }
+
+const styles: Record<string, React.CSSProperties> = {
+  container: {
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: '100vh',
+  },
+};
+
 export default MyApp;

pages/authenticate.tsx

@@ -1,40 +1,83 @@
-import { useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRouter } from 'next/router';
 import { useStytchUser, useStytch } from '@stytch/nextjs';
+import { NextPage } from 'next';
+import { StytchSDKAPIError } from '@stytch/vanilla-js';
+import Error from '../components/common/Error';
 
 const OAUTH_TOKEN = 'oauth';
 const MAGIC_LINKS_TOKEN = 'magic_links';
 const RESET_LOGIN = 'login';
 
+/*
+The Authenticate page (/authenticate) is responsible for authenticating tokens provided by Stytch is redirect-based flows. This includes both email magic links and OAuth.
+
+The Authenticate page will render as a blank page while attempting to authenticate the token present in the URL query parameters. This code runs client-side.
+
+If authentication is successful, the user is redirected to /profile.
+*/
 const Authenticate = () => {
   const { user, isInitialized } = useStytchUser();
+  const [error, setError] = useState<any>();
   const stytch = useStytch();
   const router = useRouter();
 
-  useEffect(() => {
+  const authenticateToken = useCallback(async () => {
     const stytch_token_type = router?.query?.stytch_token_type?.toString();
     const token = router?.query?.token?.toString();
-    if (token && stytch_token_type === OAUTH_TOKEN) {
-      stytch.oauth.authenticate(token, {
-        session_duration_minutes: 60 * 24,
-      });
-    } else if (token && stytch_token_type && [MAGIC_LINKS_TOKEN, RESET_LOGIN].includes(stytch_token_type)) {
-      stytch.magicLinks.authenticate(token, {
-        session_duration_minutes: 60 * 24,
-      });
+
+    try {
+      if (token && stytch_token_type === OAUTH_TOKEN) {
+        await stytch.oauth.authenticate(token, {
+          session_duration_minutes: 60 * 24,
+        });
+      } else if (token && stytch_token_type && [MAGIC_LINKS_TOKEN, RESET_LOGIN].includes(stytch_token_type)) {
+        await stytch.magicLinks.authenticate(token, {
+          session_duration_minutes: 60 * 24,
+        });
+      }
+    } catch (err: any) {
+      setError(err);
     }
   }, [router, stytch]);
 
   useEffect(() => {
+    // If the SDK is not initialized yet, wait before taking action
     if (!isInitialized) {
       return;
     }
+    // If the SDK returns a user we can redirect to the profile page. We do not need to authenticate a token since the user is already logged in.
     if (user) {
       router.replace('/profile');
+    } else {
+      // If there is no user then we attempt to authenticate the token in the URL params
+      authenticateToken();
+    }
+  }, [router, user, isInitialized, authenticateToken]);
+
+  if (error) {
+    console.log('WOOOO');
+    console.log(
+      new StytchSDKAPIError({
+        status_code: 1,
+        request_id: 'sdf',
+        error_type: 'sdf',
+        error_message: 'sdf',
+        error_url: 'sdf',
+      }) instanceof StytchSDKAPIError,
+    );
+
+    const test = StytchSDKAPIError;
+    console.log('Starting....');
+    console.log(error.__proto__ === test);
+    console.log('_proto_', error.__proto__);
+    if (error instanceof Error) console.log('HEHEHEH');
+    if (error?.name === 'StytchSDKAPIError') {
+      return <Error error={error} title="test" content="test" />;
     }
-  }, [router, user, isInitialized]);
 
-  return null;
+    return null;
+  }
 };
 
 export default Authenticate;