✨Improve the user onboarding experience

streamethorg · Jul 29, 2024 · 0822efa · 0822efa
1 parent 3158297
commit 0822efa
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 52 deletions.
diff --git a/packages/app/components/authorization/AuthorizationMessage.tsx b/packages/app/components/authorization/AuthorizationMessage.tsx
@@ -1,5 +1,5 @@
 'use client';
-import React, { useEffect } from 'react';
+import React from 'react';
 import { SignInUserButton } from '../misc/SignInUserButton';
 import {
   Card,
@@ -12,24 +12,10 @@ import {
 import LoginBackground from '@/public/login-background.png';
 import Image from 'next/image';
 
-import { usePrivy } from '@privy-io/react-auth';
-import { toast } from 'sonner';
-
 import Link from 'next/link';
 import SignInWithSocials from './SignInWithSocials';
 
 const AuthorizationMessage = () => {
-  const { ready, authenticated, login } = usePrivy();
-
-  useEffect(() => {
-    if (ready && !authenticated) {
-      login();
-    }
-    if (authenticated) {
-      toast.message('Redirecting to Studio...');
-    }
-  }, [ready, authenticated]);
-
   return (
     <div className="flex h-screen w-screen flex-row">
       <div className="flex h-full w-1/2 flex-col items-center justify-center">
@@ -39,8 +25,20 @@ const AuthorizationMessage = () => {
             <CardDescription>
               Click the sign in button to connect to StreamETH
             </CardDescription>
-            <div className="flex w-full items-center justify-center pt-[20px]">
-              <SignInUserButton />
+            <div className="flex flex-col divide-y gap-4">
+              <div className="flex w-full items-center justify-center pt-[20px]">
+                <SignInUserButton />
+              </div>
+
+              <div className="pt-6 text-sm">
+                Don&apos;t have an account? {` `}
+                <Link
+                  className="text-primary text-bold"
+                  href={'https://xg2nwufp1ju.typeform.com/to/UHZwa5M3'}
+                >
+                  Create Account
+                </Link>
+              </div>
             </div>
           </CardHeader>
 
@@ -74,7 +72,6 @@ const AuthorizationMessage = () => {
           className="object-cover w-full h-full"
         /> */}
       </div>
-      <div></div>
     </div>
   );
 };

diff --git a/packages/app/components/misc/SignInUserButton.tsx b/packages/app/components/misc/SignInUserButton.tsx
@@ -5,6 +5,9 @@ import { deleteSession, storeSession } from '@/lib/actions/auth';
 import { apiUrl } from '@/lib/utils/utils';
 import { Loader2 } from 'lucide-react';
 import React, { useEffect, useState } from 'react';
+import { Dialog, DialogContent, DialogTitle } from '../ui/dialog';
+import { toast } from 'sonner';
+import Link from 'next/link';
 
 interface SignInUserButtonProps {
   className?: string;
@@ -17,13 +20,15 @@ export const SignInUserButton = ({
 }: SignInUserButtonProps) => {
   const { ready, authenticated } = usePrivy();
   const [isLoading, setIsLoading] = useState(false);
+  const [isOpen, setIsOpen] = useState(false);
+  const [privyRefreshToken, setPrivyRefreshToken] = useState<string | null>('');
 
-  const privyRefreshToken = localStorage.getItem('privy:refresh_token');
   const parsePrivyRefreshToken = privyRefreshToken
     ? JSON.parse(privyRefreshToken)
     : null;
 
   const getSession = async () => {
+    setIsLoading(true);
     const privyToken = localStorage.getItem('privy:token');
     const token = privyToken ? JSON.parse(privyToken) : null;
     const res = await fetch(`${apiUrl()}/auth/login`, {
@@ -35,26 +40,23 @@ export const SignInUserButton = ({
       headers: { 'Content-Type': 'application/json' },
     });
     const resData = await res.json();
-    storeSession({
-      token: resData?.data?.token,
-      address: resData?.data?.user?.walletAddress,
-    });
+    if (!resData.data?.token) {
+      logout();
+      setIsOpen(true);
+      deleteSession();
+    } else {
+      storeSession({
+        token: resData?.data?.token,
+        address: resData?.data?.user?.walletAddress,
+      });
+      toast.message('Redirecting to Studio...');
+    }
+    setIsLoading(false);
   };
 
-  useEffect(() => {
-    if (!parsePrivyRefreshToken) logout();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parsePrivyRefreshToken]);
-
-  useEffect(() => {
-    if (!parsePrivyRefreshToken) logout();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parsePrivyRefreshToken]);
-
   const { login } = useLogin({
     onComplete: () => {
       getSession();
-      setIsLoading(false);
     },
     onError: (error) => {
       deleteSession();
@@ -69,6 +71,19 @@ export const SignInUserButton = ({
     },
   });
 
+  useEffect(() => {
+    // Check if we're in the browser
+    if (typeof window !== 'undefined') {
+      const token = localStorage.getItem('privy:refresh_token');
+      setPrivyRefreshToken(token);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!parsePrivyRefreshToken) logout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parsePrivyRefreshToken]);
+
   const handleClick = () => {
     setIsLoading(true);
     if (authenticated) {
@@ -79,18 +94,32 @@ export const SignInUserButton = ({
   };
 
   return (
-    <Button
-      onClick={handleClick}
-      className={className}
-      disabled={!ready || isLoading}
-    >
-      {!ready || isLoading ? (
-        <Loader2 className="h-4 w-4 animate-spin" />
-      ) : authenticated ? (
-        'Sign Out'
-      ) : (
-        btnText
-      )}
-    </Button>
+    <>
+      <Button
+        onClick={handleClick}
+        className={className}
+        disabled={!ready || isLoading}
+      >
+        {!ready || isLoading ? (
+          <Loader2 className="h-4 w-4 animate-spin" />
+        ) : authenticated ? (
+          'Sign Out'
+        ) : (
+          btnText
+        )}
+      </Button>
+      <Dialog open={isOpen} onOpenChange={setIsOpen}>
+        <DialogTitle></DialogTitle>
+        <DialogContent className="text-center">
+          <p>User not found!</p>
+          <Link
+            className="text-primary text-bold"
+            href={'https://xg2nwufp1ju.typeform.com/to/UHZwa5M3'}
+          >
+            Create Account
+          </Link>
+        </DialogContent>
+      </Dialog>
+    </>
   );
 };
diff --git a/packages/app/components/ui/button.tsx b/packages/app/components/ui/button.tsx
@@ -12,7 +12,8 @@ const buttonVariants = cva(
       variant: {
         primary:
           'bg-gradient-to-b text-white from-[#3D22BA] to-[#6426EF] border-primary hover:from-[#3D22BA]/80 hover:to-[#6426EF]/80',
-        default: 'bg-primary text-primary-foreground hover:bg-opacity-80',
+        default:
+          'bg-gradient-to-b text-white from-[#3D22BA] to-[#6426EF] border-primary hover:from-[#3D22BA]/80 hover:to-[#6426EF]/80',
         destructive:
           'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         'destructive-outline':

diff --git a/packages/server/src/services/auth.service.ts b/packages/server/src/services/auth.service.ts
@@ -18,12 +18,12 @@ export default class AuthService {
     let existingUser = await this.userService.findOne({
       walletAddress: user.wallet.address,
     });
+
     if (!existingUser) {
-      existingUser = await this.userService.create({
-        walletAddress: user.wallet.address,
-        did: user.id,
-      });
+      await privy.deleteUser(verifyToken.userId);
+      throw new HttpException(404, 'User not found');
     }
+
     let token = jwt.sign(
       { id: existingUser.walletAddress },
       config.jwt.secret,