fix: minor changes

public/favicon/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "Next starter",
+    "short_name": "NS",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

src/app/api/auth/[...nextauth]/auth-options.ts

@@ -1,28 +1,26 @@
 import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import type { NextAuthOptions } from 'next-auth';
+import GitHubProvider from 'next-auth/providers/github';
 
-// import GitHubProvider from 'next-auth/providers/github';
-// import { env } from '@/env.mjs';
+import { env } from '@/env.mjs';
 import prisma from '@/lib/prisma';
-import { stripeServer } from '@/lib/stripe';
+// import { stripeServer } from '@/lib/stripe';
 
 export const authOptions: NextAuthOptions = {
   adapter: PrismaAdapter(prisma),
   providers: [
-    // GitHubProvider({
-    //   clientId: env.GITHUB_ID,
-    //   clientSecret: env.GITHUB_SECRET,
-    // }),
+    GitHubProvider({
+      clientId: env.GITHUB_ID,
+      clientSecret: env.GITHUB_SECRET,
+    }),
   ],
   callbacks: {
-    async session({ session }) {
+    async session({ session, user }) {
       if (!session.user) return session;
 
-      // session.user.id = user.id;
-      // console.log('session.user', user);
-      // session.user.id = user.id;
-      // session.user.stripeCustomerId = user.stripeCustomerId;
-      // session.user.isActive = user.isActive;
+      session.user.id = user.id;
+      session.user.stripeCustomerId = user.stripeCustomerId;
+      session.user.isActive = user.isActive;
 
       return session;
     },
@@ -31,19 +29,19 @@ export const authOptions: NextAuthOptions = {
     createUser: async ({ user }) => {
       if (!user.email || !user.name) return;
 
-      await stripeServer.customers
-        .create({
-          email: user.email,
-          name: user.name,
-        })
-        .then(async (customer) => {
-          return prisma.user.update({
-            where: { id: user.id },
-            data: {
-              stripeCustomerId: customer.id,
-            },
-          });
-        });
+      // await stripeServer.customers
+      //   .create({
+      //     email: user.email,
+      //     name: user.name,
+      //   })
+      //   .then(async (customer) => {
+      //     return prisma.user.update({
+      //       where: { id: user.id },
+      //       data: {
+      //         stripeCustomerId: customer.id,
+      //       },
+      //     });
+      //   });
     },
   },
 };

src/components/auth/index.tsx

@@ -1,18 +1,20 @@
 import { getServerSession } from 'next-auth';
 
-import Icons from '../common/icons';
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
+import { SignInButton } from './sign-in-button';
+import SignOutButton from './sign-out';
 
 import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options';
 import * as m from '@/paraglide/messages';
 
 const Auth = async () => {
   const session = await getServerSession(authOptions);
+
   return (
     <div className="flex items-center justify-center gap-2">
       {session ? (
-        <Button variant="destructive">SignOut</Button>
+        <SignOutButton />
       ) : (
         <div className="flex flex-col gap-4">
           <div className="flex w-full max-w-sm items-center space-x-2">
@@ -22,18 +24,8 @@ const Auth = async () => {
             </Button>
           </div>
           <div className="inline-flex items-center justify-center space-x-2">
-            <Button size="default" variant="default" className="gap-2">
-              <Icons.google className="size-5" />{' '}
-              <div>{m.sign_in_google()}</div>
-            </Button>
-            <Button
-              variant="outline"
-              size="default"
-              className="gap-2 py-[1.15rem]"
-            >
-              <Icons.gitHub className="size-6" />{' '}
-              <div>{m.sign_in_github()}</div>
-            </Button>
+            <SignInButton provider="google" />
+            <SignInButton provider="github" />
           </div>
         </div>
       )}

src/components/auth/sign-in-button.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { useTransition } from 'react';
+import { signIn } from 'next-auth/react';
+
+import Icons from '../common/icons';
+
+import { Button } from '@/components/ui/button';
+import * as m from '@/paraglide/messages';
+
+type Props = {
+  provider: 'github' | 'google';
+};
+export const SignInButton = ({ provider }: Props) => {
+  const [isPending, startTransition] = useTransition();
+
+  const handleSignIn = () => {
+    startTransition(async () => {
+      if (provider === 'google') await signIn('google');
+      else await signIn('github');
+    });
+  };
+
+  return (
+    <Button onClick={handleSignIn} disabled={isPending} className="space-x-2">
+      {isPending ? (
+        <Icons.loader className="size-4" />
+      ) : (
+        <div className="size-4">
+          {provider === 'github' ? <Icons.gitHub /> : <Icons.google />}
+        </div>
+      )}
+      <div>
+        {provider === 'github' ? m.sign_in_github() : m.sign_in_google()}
+      </div>
+    </Button>
+  );
+};

src/components/auth/sign-out.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { useTransition } from 'react';
+import { signOut } from 'next-auth/react';
+
+import Icons from '../common/icons';
+import { Button } from '../ui/button';
+
+const SignOutButton = () => {
+  const [isPending, startTransition] = useTransition();
+  const handelSignOut = async () => {
+    startTransition(async () => await signOut());
+  };
+  return (
+    <Button
+      variant="destructive"
+      onClick={handelSignOut}
+      className="space-x-2"
+      disabled={isPending}
+    >
+      <div>Sign Out</div>
+      {isPending ? (
+        <Icons.loader className="size-4" />
+      ) : (
+        <Icons.logout className="size-4" />
+      )}
+    </Button>
+  );
+};
+
+export default SignOutButton;

src/components/common/icons/index.tsx

@@ -1,9 +1,43 @@
-import { Moon, Sun } from 'lucide-react';
+import { Loader2, Moon, Sun } from 'lucide-react';
 
 export type IconProps = React.HTMLAttributes<SVGElement>;
 const Icons = {
   sun: (props: IconProps) => <Sun {...props} />,
+  loader: (props: IconProps) => <Loader2 {...props} />,
   moon: (props: IconProps) => <Moon {...props} />,
+  logout: (props: IconProps) => (
+    <svg
+      fill="currentColor"
+      version="1.1"
+      id="Capa_1"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox="0 0 384.971 384.971"
+      xmlSpace="preserve"
+      {...props}
+    >
+      <g>
+        <g id="Sign_Out">
+          <path
+            d="M180.455,360.91H24.061V24.061h156.394c6.641,0,12.03-5.39,12.03-12.03s-5.39-12.03-12.03-12.03H12.03
+			C5.39,0.001,0,5.39,0,12.031V372.94c0,6.641,5.39,12.03,12.03,12.03h168.424c6.641,0,12.03-5.39,12.03-12.03
+			C192.485,366.299,187.095,360.91,180.455,360.91z"
+          />
+          <path
+            d="M381.481,184.088l-83.009-84.2c-4.704-4.752-12.319-4.74-17.011,0c-4.704,4.74-4.704,12.439,0,17.179l62.558,63.46H96.279
+			c-6.641,0-12.03,5.438-12.03,12.151c0,6.713,5.39,12.151,12.03,12.151h247.74l-62.558,63.46c-4.704,4.752-4.704,12.439,0,17.179
+			c4.704,4.752,12.319,4.752,17.011,0l82.997-84.2C386.113,196.588,386.161,188.756,381.481,184.088z"
+          />
+        </g>
+        <g></g>
+        <g></g>
+        <g></g>
+        <g></g>
+        <g></g>
+        <g></g>
+      </g>
+    </svg>
+  ),
   globe: (props: IconProps) => (
     <svg
       width="15px"
@@ -17,9 +51,9 @@ const Icons = {
       <g
         id="Page-1"
         stroke="none"
-        stroke-width="1"
+        strokeWidth="1"
         fill="currentColor"
-        fill-rule="evenodd"
+        fillRule="evenodd"
       >
         <g
           id="Icon-Set"

src/components/pages/home/index.tsx

@@ -1,7 +1,11 @@
+import { getServerSession } from 'next-auth';
+
+import { authOptions } from '@/app/api/auth/[...nextauth]/auth-options';
 import Auth from '@/components/auth';
 import * as m from '@/paraglide/messages';
 
-const HomePage = () => {
+const HomePage = async () => {
+  const session = await getServerSession(authOptions);
   return (
     <section
       className="flex size-full min-h-screen flex-col items-center justify-center gap-10 p-10"
@@ -10,6 +14,9 @@ const HomePage = () => {
       <div className="pointer-events-none whitespace-pre-wrap bg-gradient-to-b from-black to-gray-300/80 bg-clip-text py-4 text-center text-7xl font-semibold leading-none text-transparent last:text-blue-500 sm:text-8xl dark:from-white dark:to-slate-900/10">
         {m.homeHeading()}
       </div>
+      <div className="text-2xl font-bold">
+        {session && <div>Hi! {session.user?.name}</div>}
+      </div>
       <div className="mx-auto h-fit sm:w-full">
         <Auth />
       </div>

src/env.mjs

@@ -5,6 +5,8 @@ export const env = createEnv({
   server: {
     POSTGRES_URL: z.string().min(1),
     APP_URL: z.string().url().min(1),
+    GITHUB_ID: z.string().min(1),
+    GOOGLE_SITE_VERIFICATION_ID: z.string().optional(),
     // GOOGLE_SITE_VERIFICATION_ID: z.string().optional(),
     // GITHUB_ID: z.string().min(1),
     // GITHUB_SECRET: z.string().min(1),
@@ -13,9 +15,6 @@ export const env = createEnv({
     // STRIPE_SECRET_KEY: z.string().min(1),
     // STRIPE_WEBHOOK_SECRET_KEY: z.string().min(1),
     // STRIPE_SUBSCRIPTION_PRICE_ID: z.string().min(1),
-
-    GOOGLE_SITE_VERIFICATION_ID: z.string().optional(),
-    GITHUB_ID: z.string().min(1),
     GITHUB_SECRET: z.string().min(1),
     NEXTAUTH_URL: z.string().url().optional(),
     NEXTAUTH_SECRET: z.string().min(1),
@@ -29,9 +28,9 @@ export const env = createEnv({
   runtimeEnv: {
     POSTGRES_URL: process.env.POSTGRES_URL,
     APP_URL: process.env.APP_URL,
+    GITHUB_ID: process.env.GITHUB_ID,
+    GITHUB_SECRET: process.env.GITHUB_SECRET,
     // GOOGLE_SITE_VERIFICATION_ID: process.env.GOOGLE_SITE_VERIFICATION_ID,
-    // GITHUB_ID: process.env.GITHUB_ID,
-    // GITHUB_SECRET: process.env.GITHUB_SECRET,
     // NEXTAUTH_URL: process.env.NEXTAUTH_URL,
     // NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
     // STRIPE_SECRET_KEY: process.env.STRIPE_SECRET_KEY,
@@ -41,9 +40,6 @@ export const env = createEnv({
     // process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY,
     //
     GOOGLE_SITE_VERIFICATION_ID: '',
-    GITHUB_ID: 'DEMO',
-    GITHUB_SECRET: 'DEMO',
-    // NEXTAUTH_URL: ,
     NEXTAUTH_SECRET: 'DEMO',
     STRIPE_SECRET_KEY: 'DEMO',
     STRIPE_WEBHOOK_SECRET_KEY: 'DEMO',

src/lib/prisma.ts

@@ -1,12 +1,12 @@
 import { PrismaClient } from '@prisma/client';
-import { withAccelerate } from '@prisma/extension-accelerate';
+// import { withAccelerate } from '@prisma/extension-accelerate';
 
 declare global {
   // eslint-disable-next-line no-var
   var prisma: PrismaClient;
 }
 
-const prisma = global.prisma || new PrismaClient().$extends(withAccelerate());
+const prisma = global.prisma || new PrismaClient();
 
 if (process.env.NODE_ENV === 'development') global.prisma = prisma;