Implement workaroud for password reset (#516)

* Add redirect page for password reset * Allow access to redirect page, center button
HackSC · Nov 2, 2023 · 7745060 · 7745060 · vercel · Nov 2, 2023
1 parent a9d93b3
commit 7745060
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/apps/sso/components/routeGuard.tsx b/apps/sso/components/routeGuard.tsx
@@ -31,6 +31,7 @@ export function RouteGuard({ children }) {
       '/reset',
       '/reset#',
       '/reset-email',
+      '/reset-redirect',
     ];
 
     const path = url.split('?')[0];

diff --git a/apps/sso/middleware.ts b/apps/sso/middleware.ts
@@ -5,6 +5,7 @@ const REGISTERED_PATHS = new Set([
   'login',
   'reset',
   'reset-email',
+  'reset-redirect',
   'signup',
   'verify',
   'logout',

diff --git a/apps/sso/pages/reset-redirect/index.tsx b/apps/sso/pages/reset-redirect/index.tsx
@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import Head from 'next/head';
+import { getWebTitle } from '@hibiscus/metadata';
+import { useRouter } from 'next/router';
+import { useMemo } from 'react';
+import { Button } from '@hibiscus/ui-kit-2023';
+
+export function Index() {
+  const router = useRouter();
+
+  // Extract redirect url from the query params
+  // This is required due to https://github.com/supabase/gotrue/issues/713
+  const redirect = useMemo(() => router?.query?.url?.toString(), [router]);
+
+  return (
+    <MainPageWrapper>
+      <Head>
+        <title>{getWebTitle('Reset your password')}</title>
+      </Head>
+
+      <CenterDiv>
+        {redirect && (
+          <a href={redirect}>
+            <Button color="black">Click here to reset your password</Button>
+          </a>
+        )}
+      </CenterDiv>
+    </MainPageWrapper>
+  );
+}
+export default Index;
+
+const MainPageWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 100vh;
+`;
+
+const CenterDiv = styled.div`
+  margin: auto;
+`;