improve password reset flow

README.md

@@ -38,3 +38,7 @@ soon: create release via github actions
 # Resources
 - originally based on https://github.com/michyaraque/tauri-boilerplate
 - ...
+
+`
+console.log('VITE_VERCEL_ENV', import.meta.env.VITE_VERCEL_ENV);
+`

package.json

@@ -78,6 +78,7 @@
  "@esbuild-plugins/node-globals-polyfill": "^0.1.1",
  "@rollup/plugin-inject": "^5.0.3",
  "@tauri-apps/cli": "^1.4",
+ "@types/lodash.get": "^4.4.7",
  "@types/lodash.isempty": "^4.4.7",
  "@types/lodash.isequal": "^4.5.6",
  "@types/lodash.uniqby": "^4.7.7",

src/pages/Home/index.tsx

@@ -12,7 +12,6 @@ import AccountsRightSidebar from "@/common/components/RightSidebar/AccountsRight
 import ChannelsRightSidebar from "@/common/components/RightSidebar/ChannelsRightSidebar";
 import { useAccountStore } from "@/stores/useAccountStore";
 import { Outlet, useNavigate, useLocation } from "react-router-dom";
-import { useNavigationStore } from "@/stores/useNavigationStore";
 import isEmpty from "lodash.isempty";
 import EmptyStateWithAction from "@/common/components/EmptyStateWithAction";
 import { trackPageView } from "@/common/helpers/analytics";
@@ -23,7 +22,6 @@ type NavigationItemType = {
  name: string;
  router: string;
  icon: any;
- // onClick: () => void;
  getTitle?: () => string;
 }
 
@@ -38,19 +36,11 @@ export default function Home() {
  accounts
  } = useAccountStore();
 
- const {
- // mainNavigation,
- toFeed,
- toAccounts,
- toSettings,
- } = useNavigationStore();
-
  const navigation: NavigationItemType[] = [
  {
  name: 'Feed',
  router: '/feed',
  icon: SignalIcon,
- // onClick: () => toFeed(),
  getTitle: () => feedTitle
  },
  // { name: 'Replies', icon: ChartBarSquareIcon, onClick: toReplies },
@@ -70,16 +60,16 @@ export default function Home() {
  useEffect(() => {
  if (locationHash.startsWith('#error')) {
  // example location hash with error: #error=unauthorized_client&error_code=401&error_description=Email+link+is+invalid+or+has+expired
- // look for error_description
  const errorCode = findParamInHashUrlPath(locationHash, 'error_code') || '500';
  const description = findParamInHashUrlPath(locationHash, 'error_description')?.replace(/\+/g, ' ');
  console.log('throwing error', errorCode, description);
  throw new Response(description, { status: Number(errorCode), statusText: description });
+ } else if (locationHash.startsWith('#access_token')) {
+ console.log('locationhash', locationHash);
+ navigate(`/login${locationHash}`);
+ } else {
+ console.log('unknown locationHash', locationHash);
  }
- // else if (pathname.slice(1) !== mainNavigation && pathname !== '/login') {
- // console.log('navigating to', mainNavigation, 'because pathname is different', pathname);
- // navigate(mainNavigation);
- // }
  }, [locationHash]);
 
  const renderEmptyState = () => (

src/pages/Login/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from 'react';
 import { Session } from '@supabase/supabase-js';
 import { hydrate } from '@/stores/useAccountStore';
 import { useNavigate, useLocation } from "react-router-dom";
-
+import get from 'lodash.get';
 
 const appearance = {
  extend: true,
@@ -37,22 +37,33 @@ const appearance = {
 
 export default function Login() {
  const navigate = useNavigate();
- // const [session, setSession] = useState<Session | null>(null);
+ const [session, setSession] = useState<Session | null>(null);
  const [isLoading, setIsLoading] = useState(false);
+ const { hash } = useLocation();
+ const queryParams = hash
+ .substring(1)
+ .split('&')
+ .reduce((acc, curr) => {
+ const [key, value] = curr.split('=');
+ return { ...acc, [key]: value };
+ }, {});
+
+ const requestType = get(queryParams, 'type');
+ console.log('Login queryParams.type', requestType);
 
  useEffect(() => {
  supabaseClient.auth.getSession().then(({ data: { session } }) => {
  console.log(`Login getSession`, session)
- // setSession(session)
+ setSession(session)
  })
 
  const {
  data: { subscription },
  } = supabaseClient.auth.onAuthStateChange((_event, session) => {
  console.log(`Login onAuthStateChange`, session)
- // setSession(session)
+ setSession(session);
 
- if (session) {
+ if (session && requestType !== 'recovery') {
  console.log('Login onAuthStateChange hasSession - hydrate and navigate');
  setIsLoading(true);
  hydrate();
@@ -64,33 +75,33 @@ export default function Login() {
  return () => subscription.unsubscribe()
  }, [])
 
- const { hash } = useLocation();
- const queryParams = hash
- .substring(1)
- .split('&')
- .reduce((acc, curr) => {
- const [key, value] = curr.split('=');
- return { ...acc, [key]: value };
- }, {});
+
  console.log(`Login hash`, hash, 'queryParams', queryParams);
 
  return (
  <>
  <div className="flex min-h-full flex-1 flex-col justify-center px-6 py-12 lg:px-8">
  <div className="sm:mx-auto sm:w-full sm:max-w-sm">
- <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white">
+ <h2 className="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-white font-semibold">
  Sign in
  </h2>
  </div>
  {isLoading && (<span className="my-4 font-semibold text-gray-200">Loading...</span>)}
- <div className="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+ <div className="text-white text-lg mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
  <Auth
  supabaseClient={supabaseClient}
  providers={[]}
  appearance={appearance}
  queryParams={queryParams}
  />
  </div>
+ {session?.user && (<button
+ type="button"
+ onClick={() => navigate('/feed')}
+ className="mx-auto items-center justify-center gap-x-1.5 rounded-r-sm px-4 py-3 text-white text-sm bg-[#10B981] hover:bg-[#059669]"
+ >
+ Go to your feed
+ </button>)}
  </div>
  </>
  )

yarn.lock

@@ -1775,6 +1775,13 @@
  resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.1.tgz#aa22750962f3bf0e79d753d3cc067f010c95f194"
  integrity sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==
 
+"@types/lodash.get@^4.4.7":
+ version "4.4.7"
+ resolved "https://registry.yarnpkg.com/@types/lodash.get/-/lodash.get-4.4.7.tgz#1ea63d8b94709f6bc9e231f252b31440abe312cf"
+ integrity sha512-af34Mj+KdDeuzsJBxc/XeTtOx0SZHZNLd+hdrn+PcKGQs0EG2TJTzQAOTCZTgDJCArahlCzLWSy8c2w59JRz7Q==
+ dependencies:
+ "@types/lodash" "*"
+
 "@types/lodash.isempty@^4.4.7":
  version "4.4.7"
  resolved "https://registry.yarnpkg.com/@types/lodash.isempty/-/lodash.isempty-4.4.7.tgz#b1015d1adba560daf560ad04f294848939e75317"