refactor: use server actions to sign in and sign out

nitkkr-dev · Apr 27, 2024 · 75b3317 · 75b3317
1 parent a880c45
commit 75b3317
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 48 deletions.
diff --git a/app/[locale]/login/login.tsx b/app/[locale]/login/login.tsx
@@ -1,11 +1,12 @@
+import { FcGoogle } from 'react-icons/fc';
+
 import { Input } from '~/components/inputs';
 import { Button } from '~/components/ui';
 import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
+import { signIn } from '~/server/auth';
 import { getS3Url } from '~/server/s3';
 
-import LoginButton from './sign-in-with-google-button';
-
 const Login = async ({ locale }: { locale: string }) => {
   const text = (await getTranslations(locale)).Login;
 
@@ -43,7 +44,25 @@ const Login = async ({ locale }: { locale: string }) => {
             locale === 'en' ? "after:content-['OR']" : "after:content-['अथवा']"
           )}
         />
-        <LoginButton loginText={text.signInWithGoogle} />
+
+        <form
+          action={async () => {
+            'use server';
+            await signIn('google', { redirectTo: `/${locale}/profile` });
+          }}
+        >
+          <Button
+            className={cn(
+              'p-2 sm:p-3 md:p-4',
+              'w-full space-x-3 bg-neutral-50 hover:bg-neutral-100'
+            )}
+            type="submit"
+            variant="outline"
+          >
+            <FcGoogle className="size-4 sm:size-5 md:size-6" />
+            <span>{text.signInWithGoogle}</span>
+          </Button>
+        </form>
       </section>
     </article>
   );

diff --git a/app/[locale]/login/sign-in-with-google-button.tsx b/app/[locale]/login/sign-in-with-google-button.tsx
diff --git a/app/[locale]/profile/client-utils.tsx b/app/[locale]/profile/client-utils.tsx
@@ -1,6 +1,5 @@
 'use client';
 
-import { signOut } from 'next-auth/react';
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
 import { Suspense } from 'react';
@@ -20,22 +19,6 @@ import Loading from '~/components/loading';
 import { Button } from '~/components/ui';
 import { cn } from '~/lib/utils';
 
-export const LogOut = ({
-  className,
-  text,
-}: {
-  className?: string;
-  text: string;
-}) => (
-  <Button
-    className={className}
-    onClick={() => signOut({ callbackUrl: '/' })}
-    variant="ghost"
-  >
-    {text}
-  </Button>
-);
-
 export const PathnameAwareSuspense = ({
   children,
 }: {

diff --git a/app/[locale]/profile/layout.tsx b/app/[locale]/profile/layout.tsx
@@ -1,12 +1,13 @@
 import Image from 'next/image';
 
+import { Button } from '~/components/ui';
 import Unauthorized from '~/components/unauthorized';
 import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
-import { getSession } from '~/server/auth';
+import { getSession, signOut } from '~/server/auth';
 import { db } from '~/server/db';
 
-import { LogOut, PathnameAwareSuspense, Tabs } from './client-utils';
+import { PathnameAwareSuspense, Tabs } from './client-utils';
 
 export default async function ProfileLayout({
   children,
@@ -78,7 +79,16 @@ export default async function ProfileLayout({
           />
         </ol>
 
-        <LogOut className="px-3 py-2" text={text.logout} />
+        <form
+          action={async () => {
+            'use server';
+            await signOut({ redirectTo: '/' });
+          }}
+        >
+          <Button className="px-3 py-2" variant="ghost">
+            {text.logout}
+          </Button>
+        </form>
       </article>
 
       <Tabs