DEV Community: Ojas

How I Boosted My Nuxt 3 Portfolio Speed by 3x (4.5s to 1.4s)

Ojas — Sun, 19 Oct 2025 13:45:57 +0000

I recently realized my personal portfolio—built with Nuxt 3, Vue 3, TypeScript, and Vite—was loading way slower than I expected. It looked great but felt sluggish. After digging into its metrics, I found the initial load time was around 4.5 seconds. That might not sound terrible, but for a portfolio, it’s enough to lose visitors before they even see your work.

So, I decided to take a weekend to optimize it—and ended up cutting the loading time down to just 1.4 seconds. Here’s how I did it.

The Problem

When I first ran a Lighthouse audit, the metrics weren’t pretty:

First Contentful Paint: ~3.9s
Time to Interactive: ~4.5s
Largest Contentful Paint: ~4.2s

Most of the slowness came from:

Rendering delays due to SSR configuration
Heavy component imports and unused dependencies in the bundle
Unoptimized images (massive JPGs and PNGs)
Everything loading all at once, no matter if the section was currently visible

The goal: make it fast without losing developer convenience. That’s when I revisited my Nuxt setup.

SSR vs SSG — The Big Decision

At first, I built my portfolio using Server-Side Rendering (SSR). That meant every request was processed dynamically on the server before being sent to the client.

However, after thinking it through, SSR was overkill for a mostly static portfolio.

Simplified Explanation

SSR (Server-Side Rendering): Each request gets a fresh, pre-rendered HTML page from the server. Great for dynamic data (like dashboards or user profiles).
SSG (Static Site Generation): HTML pages are prebuilt at build time and served as static files. Excellent for static content (like personal portfolios or blogs).

Real Use Cases

SSR: News sites, e-commerce product pages.
SSG: Developer portfolios, landing pages, blogs.

Switching from SSR to SSG alone made my pages load almost instantly since most of the HTML was pre-rendered ahead of time.

Optimization Techniques That Made the Difference

1. Route Prerendering Configuration

Nuxt 3 allows you to prerender certain routes during the build process.

// nuxt.config.ts
export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: [
        '/', 
        '/about', 
        '/projects',
        '/contact'
      ],
      crawlLinks: true,
    },
  },
})

Static pages like /about and /contact were prebuilt.
Dynamic routes like /projects/[id] were skipped to be fetched lazily at runtime.

This instantly shaved off a big chunk of server-render time.

2. Lazy Loading Components with `defineAsyncComponent()`

Initially, every Vue component was imported upfront—even for parts not visible on initial load. That’s bad for performance.

By loading larger sections asynchronously, I made the first paint faster:

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'

const ProjectGrid = defineAsyncComponent(() => import('@/components/ProjectGrid.vue'))
</script>

<template>
  <HeroSection />
  <Suspense>
    <ProjectGrid />
  </Suspense>
</template>

This approach ensures users don’t wait for heavy components if they’re below the fold.

3. Tree-Shaking Dependencies (Goodbye Full Lodash Import)

I noticed my bundle size ballooned because I imported Lodash like this:

import _ from 'lodash'

That pulled the entire library, even if I used just one or two functions. Instead, importing individually helped a lot:

import cloneDeep from 'lodash/cloneDeep'
import debounce from 'lodash/debounce'

After switching to individual imports, my JS bundle dropped by 35%.

4. Image Optimization with NuxtImg and WebP Format

My images were beautiful... and huge. Switching to the Nuxt Image module was an easy win.

<template>
  <NuxtImg src="/images/profile.jpg" format="webp" width="400" height="400" alt="Profile picture" />
</template>

The module automatically serves optimized formats like WebP and AVIF.
It also lazy-loads below-the-fold images.
This single change improved my Largest Contentful Paint by nearly 1 full second.

5. Client-Side Data Fetching with `useLazyFetch()`

For my dynamic project data (fetched from a JSON API), I switched from useFetch() to useLazyFetch() with client-only fetching. This prevented unnecessary server rendering on each request.

<script setup lang="ts">
const { data: projects } = useLazyFetch('/api/projects', { server: false })
</script>

This ensured that static pages were prebuilt, and dynamic data fetched only on the client side, keeping build times short and initial page loads quick.

6. Manual Code Splitting with Vite Rollup Options

Even after tree-shaking, some libraries remained large. Vite’s Rollup options helped me manually split bundles.

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router'],
          vendor: ['axios', 'lodash']
        }
      }
    }
  }
})

This helped make caching smarter: vendor code rarely changes and can be reused for longer periods.

7. Custom Composables for Performance

Reusable composables helped centralize optimization logic. For instance, I created a composable for debounced window resize:

// composables/useDebouncedResize.ts
import { ref, onMounted, onUnmounted } from 'vue'
import debounce from 'lodash/debounce'

export function useDebouncedResize(delay = 200) {
  const width = ref(window.innerWidth)

  const update = debounce(() => {
    width.value = window.innerWidth
  }, delay)

  onMounted(() => window.addEventListener('resize', update))
  onUnmounted(() => window.removeEventListener('resize', update))

  return { width }
}

Using this composable instead of creating multiple resize listeners across components reduced redundant listeners and lowered CPU usage.

Results & Metrics

After implementing all these optimizations, I re-ran the Lighthouse and WebPageTest audits.

| Metric | Before | After |
||||
| Load Time | 4.5s | 1.4s |
| First Contentful Paint | 3.9s | 1.2s |
| Time to Interactive | 4.5s | 1.4s |
| Bundle Size | ~830KB | 280KB |

That’s a solid 3x performance improvement. The site now feels instant, even on mobile 4G.

Key Takeaways

Know when to use SSG over SSR. Static pages should stay static.
Lazy-load everything non-critical to your First Paint.
Avoid full dependency imports; tree-shake effectively.
Optimize assets early. The Nuxt Image module is your best friend.
Measure as you go. Fixing blindly can lead to diminishing returns.

Conclusion

Optimizing performance in Nuxt 3 isn’t just about faster load times—it’s about improving the developer experience and giving visitors a smoother feel. Every millisecond counts, especially for a personal portfolio that makes that crucial first impression.

If you’ve built a Nuxt 3 site and haven’t checked its performance yet—now’s the time. You might be surprised by how much difference a weekend of careful optimization can make.

Cover image by Chris Peeters

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 4

Ojas — Sat, 15 Mar 2025 11:27:49 +0000

In this part of the series, we will focus on building the Profiles table for our users using Prisma, Supabase, and PostgreSQL for our Next.js application. This combination offers a powerful backend solution, leveraging Prisma's advanced ORM capabilities and Supabase's PostgreSQL database, which provides a scalable and reliable data storage system. We will also be creating Triggers such that a user profile is created as soon as a user signs up on our application.

🔗 Check out the full code for this series here.

Enabling Row Level Security (RLS) is crucial for ensuring that users can only access their data. RLS allows us to define fine-grained access control policies directly within the database, enhancing security and privacy. By integrating RLS with Supabase's authentication system, we can create a secure environment where users can manage their profile data without compromising data integrity. This approach not only protects against unauthorized access but also simplifies the development process by reducing the need for complex server-side / middleware logic.

While the authentication table in the Supabase gives you basic information about the user, you may want to store some extra information in a separate table, such as the Profile to store more info about the user. In this section we will be doing the same.

Adding Prisma and Defining Schemas

Add Prisma to your project by using this command. This will install the Prisma ORM client that will make it easier for us to do CRUD operations in our Supabase DB.

pnpm add @prisma/client

To get the Database URL from the project in the Supabase, switch to the project that you’re working on. In the left pane, click “Database” and then click “Connect” on the top.

Copy your Database URL and in your .env file, paste it like this. Add these lines in the bottom of the file.

`.env`

DATABASE_URL=postgresql://postgres:[YOUR-PASSWORD]@db.phbngigehmegragywadf.supabase.co:5432/postgres?pgbouncer=true
DIRECT_URL=postgresql://postgres:[YOUR-PASSWORD]@db.phbngigehmegragywadf.supabase.co:5432/postgres

Note: The DIRECT_URL is the same as the DATABASE_URL, except that it contains the pgbouncer query.

Also, replace the “[YOUR-PASSWORD]” part with your Database password. If you forgot your Database password, you can always reset it by going to the Project Settings > Database > Reset Database Password. This won’t affect any other configuration in the Supabase project.

Create a folder named “prisma” in the root of your project, and inside that, create a file named “schema. prisma “.

Note: Try to figure out the Prisma Schema. It should be self explanatory. Since it’s a different language altogether, I won’t be able to explain it here. You can check out Prisma Docs for more.

`prisma/schema.prisma`

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider  = "postgresql"
  url       = env("DATABASE_URL")
  directUrl = env("DIRECT_URL")
}

model Profile {
  id        String  @id @default(dbgenerated("gen_random_uuid()")) @db.Uuid
  firstName String? @map("first_name")
  lastName  String? @map("last_name")
  email     String  @unique
  createdAt DateTime @default(now()) @map("created_at")
  updatedAt DateTime @updatedAt @map("updated_at")

  @@map("profiles")
}

💡 Tip: Install the Prisma extension for the VS Code to get syntax highlighting and type safety features of Prisma.

Let’s add a script in our package.json file to make the migrations easier. Migration is a process in which you take your local schema and “migrate” it to make/modify the tables in your remote database. Add the following line under the scripts section in your package.json file.

`/package.json`

 "migrate": "pnpx prisma migrate dev --name init && bunx prisma generate"

Let’s try out our migration script. This should ideally create a “profiles” table in our Supabase Database. Run the following command in the terminal:

pnpm migrate

Check your Database in the Supabase again, and confirm that the tables are created.

Adding Triggers to Create and Delete a profile automatically when a new User Signs Up for our Application

Now that we created the Profiles table, it is time to ensure that whenever a new User signs up for our application, we must create a new Profile for that user, and delete that user from the authentication table when the user has deleted their profile. In simple terms

User signs up → A record is added to the auth table → We create a profile.
User deletes their profile → A record is removed from the profiles table → We delete their authentication info (account).
Head over to your Supabase project and select the SQL Editor in the left navigation pane.

Paste the following query in the editor and click “Run”

`triggers.sql`

-- Creates a function to run when user is authenticated (signed up)
create or replace function public.on_user_signup() 
returns trigger as $$
begin
  insert into public.profiles (id, email, updated_at, first_name, last_name)
  values (
    new.id, new.email, 
    now(),
    NEW.raw_user_meta_data->>'first_name',
    NEW.raw_user_meta_data->>'last_name'
  );
  return new;
end;
$$ language plpgsql security definer;

-- Creates a trigger to run the above function when a new user is authenticated (signed up)
create or replace trigger create_user_profile
  after insert on auth.users
  for each row execute procedure public.on_user_signup();

-- Create a function to delete a user
create or replace function public.on_profile_delete()
returns trigger as $$
begin
  delete from auth.users where id = old.id;
  return new;
end;
$$ language plpgsql security definer;

-- Creates a trigger to run when a profile is deleted
create or replace trigger delete_auth_user
  after delete on public.profiles
  for each row execute procedure public.on_profile_delete();

First we create a function to create a new profile in the Profiles table.
Then we create a trigger to execute the above function when a new user is authenticated (means a new user is added to the “auth” table).
Then we create a function to delete the user from the “auth” table.
Then we create a trigger to run that function whenever a profile is deleted from the “Profile” table.

Note: I have used create or replace such that it doesn’t cause any issues when you run this query again and there’s already a trigger or function with that name. Keep in mind this will replace the already existing function (if you have) of the same name, so be careful when executing this script.

Test these changes by signing up with a new account. A new record should appear in the Profile table. Go to Table Editor (in the left navigation pane) > profiles and see there’s a new record.

Now delete this record manually from here, and check the authentication table to verify if the records are being deleted there.

Adding Row Level Security RLS to your tables

Note: It is recommended that you only access your Database from server-side code only. But since supabase uses public keys which are exposed to the client side of the NextJS framework, we need to secure the table data with RLS.

Row Level Security (RLS) in PostgreSQL is a powerful feature that allows database administrators to control access to specific rows within a table based on user roles or other conditions. This is achieved by defining policies that act as filters, determining which rows are visible or modifiable by a user during operations like SELECT, INSERT, UPDATE, and DELETE

When using Supabase in client-side (our Next JS client) applications, enabling RLS is crucial for securing data. Even if authentication is handled through server actions, enabling RLS on tables prevents unauthorized access via the anonymous key, ensuring that data is not exposed to unauthorized users. This provides an additional layer of security, acting as a "defense in depth" mechanism to protect data from malicious actors.

If your application only manipulates data from the server side using service keys, RLS policies are not strictly necessary. Service keys can bypass RLS, allowing server-side operations to access data without restrictions. However, enabling RLS without policies still blocks unauthorized access attempts via the anonymous key, providing some security benefits even in server-side scenarios.

Paste the following query in the SQL Editor and run it:

-- Enable RLS on profiles table
ALTER TABLE profiles ENABLE ROW LEVEL SECURITY;

-- ============================================================================
-- Policies for profiles table
-- ============================================================================

-- Policy: Allow users to read their own profile
CREATE POLICY read_own_profile ON profiles
    FOR SELECT
    USING (auth.uid() = id);

-- Policy: Allow users to update their own profile
CREATE POLICY update_own_profile ON profiles
    FOR UPDATE
    USING (auth.uid() = id);

-- Policy: Allow users to delete their own profile
CREATE POLICY delete_own_profile ON profiles
    FOR DELETE
    USING (auth.uid() = id);

I’ve added comments for each line to describe what each line is doing.

In the table editor, you can see now the “Open Lock” icon is gone from the profile table. Which means our profile table has RLS enabled.

Congratulations!

As we wrap up our detailed guide on creating a robust full-stack application with Next.js and Supabase, let's reflect on what we've accomplished. We started by setting up a brand new Next.js app, complete with essential authentication pages like Signup, Login, Forgot Password, and Reset Password, all styled with ShadCN and Tailwind CSS. This not only gave our app a sleek look but also provided a solid foundation for user management.

Next, we integrated Supabase to handle authentication and protect our routes, ensuring that sensitive data is only accessible to authorized users. We also made logging in easier for our users by setting up Google authentication, providing a seamless experience.

One of the most powerful aspects of our application is its advanced database management. We used Prisma ORM to create, migrate, and query tables efficiently. Additionally, we implemented Row Level Security (RLS) in our Supabase PostgreSQL tables, which means that only authenticated users can manage data they own. This extra layer of security is crucial for maintaining data integrity.

Throughout this journey, we've shown how Next.js and Supabase can be combined to build applications that are both secure and scalable. Whether we're creating a user management system or a complex data-driven platform, the techniques outlined here provide a solid foundation for success. By following these steps, developers can ensure their applications meet the demands of modern web development while keeping data safe and secure.

🔗 Check out the full code for this series here.

If you found this article useful, like, comment, and share, or just buy me a coffee?

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 3

Ojas — Sat, 15 Mar 2025 11:18:37 +0000

Let us see how to enhance our web app's security and user experience by integrating Google authentication using Supabase. This guide will walk you through creating a Google Cloud project, obtaining client credentials, and configuring them in Supabase for seamless Google sign-in functionality.

🔗 Check out the full code for this series here.

Google Cloud is a comprehensive suite of cloud computing services that includes Google Cloud Platform (GCP), Google Workspace, and more. GCP provides a robust infrastructure for building, deploying, and managing web applications, leveraging services such as computing, storage, and machine learning. A Google Cloud project is a top-level entity that organizes resources and services, allowing users to manage access, billing, and resource allocation efficiently.

Creating a new Google Cloud Project and getting the Credentials

Ignore this step if you want to integrate Google login in an already existing project.

Sign up for console.cloud.google.com if you didn’t already. Go to your Google Cloud Dashboard, and click “All Projects”, then in the dialog that appeared, click “New Project”.

Give your project a suitable name and click “Create”. Wait for a few minutes, and sip that cola while the project is being created.

After the project is created, select that project from the “All Projects” dropdown.
Click on the hamburger menu on the top left, then select APIs and Services > OAuth Consent Screen.

💡 Tip: If you don’t find these settings, then just search for “OAuth consent screen” in the search bar at the top.

Click “Get Started”. Here are the settings that you need to fill/choose:
1. Give an app name of your choice, preferably the same as your project name.
2. In the user support email, give your email that you want to be contacted on.
3. Select audience as “External”
4. Give your email as the contact information.
5. Agree to the terms and conditions after carefully reading them.
6. Click “Create”. This will create a new consent screen for login to your application.

Now we are ready to create a new OAuth Client that will handle the signup and login in our application.

Click “Create OAuth Client” on the right side of the screen

Fill in the details as follows. For application type, select “Web application”. For “Authorized JavaScript Origins”, select your local host address. If you have a production environment URL, you can add it here too. DO NOT CLICK “CREATE”. We need to enter the “Authorized Redirect URL” from Supabase here.

Go to your Supabase Dashboard and select the project for which you want to enable the Google authentication. In our case, we created “supabase-auth-demo” project, so I will be using that one.
In the left pane, select the “Authentication” screen

In the left pane, click “Sign In / Up” and then scroll down in the “Auth Providers” section and click “Google”, and enable it.

Copy the “Callback URL (for OAuth)” URL and head over back to your GCP Project and paste it there. DO NOT CLOSE THIS TAB, as we will have to fill in the details “Client ID” and “Client Secret” after generating it.

Add that “Callback URL” from Supabase to the “Authorized redirect URIs” in the OAuth Client in GCP and click “Create”.

Now visit the client you just created, copy the “Client ID” and “Client Secret” and paste it in the Supabase Google settings.

Now we are ready to set up the routes in our NextJS application to perform the Google Authentication.

Adding Google authentication functionality to our Next JS application

Now all we need is to add the function that will handle the Google signup and Login for us.

Add the signInWithGoogle function to the component below and use this function on the Google sign in button.

Signup `/app/signup/page.ts`

import { useSearchParams } from "next/navigation";
import { createClient } from "@/utils/supabase/client";

// rest of the code
...
...
// rest of the code

const searchParams = useSearchParams();
    const next = searchParams.get("next");
    const supabase = createClient();
    async function signInWithGoogle() {
        try {
            const { error } = await supabase.auth.signInWithOAuth({
                provider: "google",
                options: {
                    redirectTo: `${window.location.origin}/auth/callback${
                        next ? `?next=${encodeURIComponent(next)}` : ""
                    }`,
                },
            });

            if (error) {
                throw error;
            }
        } catch (error) {
            alert("There was an error logging in with Google."),
                console.error(error);
        }
    }
    // rest of the code
    // ...
    // ...
    // rest of the code

     <Button
        type="button"
        variant="outline"
        className="w-full"
        onClick={() => signInWithGoogle()}
    >
        <Mail size={16} className="mr-2" />
        Sign up with Google
    </Button>

And do the same in the file `/app/login/page.tsx`

Test out the Google Login/Signup flow.

Note: Supabase will take care of the Email and Google integration if you Sign Up with your Gmail address.

💡Tips

In case of any errors, look for any console logs in the browser console as well as the server terminal. Also check Supabase logs in your Supabase project.
For production, you should publish your Google OAuth Client that you created in the GCP.

🔗 Check out the full code for this series here.

If you found this article useful, like, comment, and share, or just buy me a coffee?

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 2

Ojas — Sat, 15 Mar 2025 05:26:18 +0000

Supabase is a powerful backend-as-a-service that provides a PostgreSQL database, authentication, and storage, making it an excellent alternative to Firebase. Here's how to create a Supabase project and set up the necessary environment variables for your Next.js application.

🔗 Check out the full code for this series here.

Create a Supabase Project

Sign Up or Log In: Visit supabase.com and create an account or log in if you already have one.
Create a New Project: Once logged in, click "New Project" and fill in the necessary details such as organisation, project name, and password. Choose a database region that is closest to your users.

💡 Tip: Save your Database Password somewhere safe. You’ll get this one-time, and we will need it. You can always reset the Database Password in the Project Settings if you forget it.

Click on Create new project and wait for the process to finish.

Get your API keys

Let’s get our Project URL and API keys required to connect our application to our Supabase project.

Navigate to the Supabase Dashboard and click on the Project you just created.
In the left menu, at the bottom, click Project Settings, and then click Data API
Find your Project URL and Public Anon Key here:

Create a .env file in the root of your Next.js application and paste your keys like this

NEXT_PUBLIC_SUPABASE_URL=<your-project-url>
NEXT_PUBLIC_SUPABASE_ANON_KEY=<your-anon-key>

Creating Client and Server Supabase Client

Supabase uses two different clients to connect to the Supabase project

Server Client: This will be used by Server Components, Server Actions, and anything else that runs on our NextJS Server.
Browser Client: This will be used by Client Components, Hooks, Stores, and anything else that runs on our Browser UI.
Install the supabase ssr package

pnpm add @supabase/ssr @supabase/supabase-js

Create a folder called utils/supabase . We will use this folder to create Supabase Browser Client, Supabase Server Client, and Supabase Middleware to handle routing for us.

Supabase Browser Client `/utils/supabase/client.ts`

import { createBrowserClient } from "@supabase/ssr";

export const createClient = () =>
    createBrowserClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    );

Supabase Server Client `/utils/supabase/server.ts`

import { createServerClient } from "@supabase/ssr";
import { cookies } from "next/headers";

export const createClient = async () => {
    const cookieStore = await cookies();

    return createServerClient(
        process.env.NEXT_PUBLIC_SUPABASE_URL!,
        process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
        {
            cookies: {
                getAll() {
                    return cookieStore.getAll();
                },
                setAll(cookiesToSet) {
                    try {
                        cookiesToSet.forEach(({ name, value, options }) => {
                            cookieStore.set(name, value, options);
                        });
                    } catch (error) {
                        // The `set` method was called from a Server Component.
                        // This can be ignored if you have middleware refreshing
                        // user sessions.
                        console.error(error);
                    }
                },
            },
        },
    );
};

Before creating the middleware, let’s define what routes are in the client, and which routes are allowed only when the user is logged in. Add the following lines to the end of the constants file /lib/constants

export const CLIENT_ROUTES = {
  HOME: "/",

  // app
  DASHBOARD: "/dashboard",
  RESET_PASSWORD: "/reset-password",

  // auth
  LOGIN: "/login",
  SIGNUP: "/signup",
  FORGOT_PASSWORD: "/forgot-password",
};

export const PROTECTED_ROUTES = [
  CLIENT_ROUTES.DASHBOARD,
  CLIENT_ROUTES.RESET_PASSWORD,
];

export enum EServerResponseCode {
    // good practice
  SUCCESS,
  FAILURE,
}

💡 Tip: After adding these routes, you can use them for href linking. It is considered a better practice over using plain strings everywhere.

Also, let’s add lodash to make our lives easier while working with JS functions.

pnpm add lodash-es
pnpm add -D @types/lodash-es

Let’s create a dummy dashboard route that will be protected by our middleware, defined in the PROTECTED_ROUTES above.

Dashboard Page `/app/dashboard/page.tsx`

"use client";

import { Button } from "@/components/ui/button";
import { signOutAction } from "@/actions/supabase";
import { useRouter } from "next/navigation";

import { CLIENT_ROUTES } from "@/lib/constants";

export default function DashboardPage() {
    const router = useRouter();

    async function onLogout() {
        try {
            await signOutAction();
            router.push(CLIENT_ROUTES.LOGIN);
        } catch (error) {
            alert("Some error occured");
        }
    }

    return (
        <div className="mt-32 text-center">
            This is a protected dashboard page. You can only view this page when
            you're logged in.
            <form action={onLogout} className="mt-4">
                <Button>Logout</Button>
            </form>
        </div>
    );
}

Now let’s create our Supabase Middleware to handle auth routing

Supabase Middleware `/utils/supabase/middleware`

import { createServerClient } from "@supabase/ssr";
import { includes, isEmpty } from "lodash-es";
import { type NextRequest, NextResponse } from "next/server";

import { CLIENT_ROUTES, PROTECTED_ROUTES } from "@/lib/constants";

export const updateSession = async (request: NextRequest) => {
    // This `try/catch` block is only here for the interactive tutorial.
    // Feel free to remove once you have Supabase connected.
    const headers = new Headers(request.headers);

    headers.set("x-current-path", request.nextUrl.pathname);

    try {
        // Create an unmodified response
        let response = NextResponse.next({
            request: {
                headers: request.headers,
            },
        });

                // supabase defaults
        const supabase = createServerClient(
            process.env.NEXT_PUBLIC_SUPABASE_URL!,
            process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
            {
                cookies: {
                    getAll() {
                        return request.cookies.getAll();
                    },
                    setAll(cookiesToSet) {
                        cookiesToSet.forEach(({ name, value }) =>
                            request.cookies.set(name, value),
                        );
                        response = NextResponse.next({
                            request,
                        });
                        cookiesToSet.forEach(({ name, value, options }) =>
                            response.cookies.set(name, value, options),
                        );
                    },
                },
            },
        );

        // This will refresh session if expired - required for Server Components
        // https://supabase.com/docs/guides/auth/server-side/nextjs
        const {
            data: { user },
        } = await supabase.auth.getUser();

        if (
            isEmpty(user) &&
            includes(PROTECTED_ROUTES, request.nextUrl.pathname)
        ) {
            // no user, potentially respond by redirecting the user to the login page except for the above pages
            const url = request.nextUrl.clone();

            url.pathname = CLIENT_ROUTES.LOGIN;

            return NextResponse.redirect(url, { headers });
        }

        if (
            !isEmpty(user) &&
            (request.nextUrl.pathname === CLIENT_ROUTES.LOGIN ||
                request.nextUrl.pathname === CLIENT_ROUTES.SIGNUP ||
                request.nextUrl.pathname === CLIENT_ROUTES.FORGOT_PASSWORD)
        ) {
            // if the user is logged in and the url is login, signup, or forgot-password we redirect the user to dashboard.
            const url = request.nextUrl.clone();

            url.pathname = CLIENT_ROUTES.DASHBOARD;

            return NextResponse.redirect(url, { headers });
        }

        return response;
    } catch (error) {
        // If you are here, a Supabase client could not be created!
        // This is likely because you have not set up environment variables.
        // Check out steps 1-4 again.
        console.error(error);

        return NextResponse.next({
            request: {
                headers,
            },
        });
    }
};

Now let’s create a Next.js Middleware in the root folder of our application and hook the Supabase middleware we just created. Otherwise the Supabase middleware is useless.

Next.js Middleware `/middleware.ts`

import { type NextRequest } from "next/server";

import { updateSession } from "@/utils/supabase/middleware";

export async function middleware(request: NextRequest) {

    return await updateSession(request);
}

export const config = {
    matcher: [
        /*
         * Match all request paths except:
         * - _next/static (static files)
         * - _next/image (image optimization files)
         * - favicon.ico (favicon file)
         * - images - .svg, .png, .jpg, .jpeg, .gif, .webp
         * Feel free to modify this pattern to include more paths.
         */
        "/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)",
    ],
};

💡 Tip: I’ve added the Route handling logic to the Supabase middleware for simplicity. It should ideally be handled with a separate middleware.

Now we are ready to create Server Actions (APIs) that will help our App to login and manage authentication.

Adding Supabase Callbacks and Server Actions to handle authentication

Before adding Server Actions for the users to authenticate to our application, we need to add some necessary callback URLs for Supabase to work.

Callback Route: This route helps Supabase to verify a temporary token to let users reset their password, even when they are not logged in. Supabase sends a temporary token to let the user authenticate to our application temporarily just to change the password.
Confirm Route: This route helps Supabase identify new users, and allows the signup to our application. Then this route redirects the user to the specified page where we want the user to visit.

Callback `/app/auth/callback/route.ts`

import { isEmpty } from "lodash-es";
import { NextResponse } from "next/server";

import { CLIENT_ROUTES } from "@/lib/constants";
import { createClient } from "@/utils/supabase/server";

export async function GET(request: Request) {
    // The `/auth/callback` route is required for the server-side auth flow implemented
    // by the SSR package. It exchanges an auth code for the user's session.
    // https://supabase.com/docs/guides/auth/server-side/nextjs
    const requestUrl = new URL(request.url);
    const code = requestUrl.searchParams.get("code");
    const origin = requestUrl.origin;
    const redirectTo = requestUrl.searchParams.get("redirect_to")?.toString();

    if (code) {
        const supabase = await createClient();

        const { error } = await supabase.auth.exchangeCodeForSession(code);

        if (!isEmpty(error)) {
            return NextResponse.redirect(
                `${origin}${CLIENT_ROUTES.LOGIN}?failed=true`,
            );
        }
    }

    if (redirectTo) {
        return NextResponse.redirect(`${origin}${redirectTo}`);
    }

    // URL to redirect to after sign up process completes
    return NextResponse.redirect(`${origin}${CLIENT_ROUTES.DASHBOARD}`);
}

Confirm `/app/auth/confirm/route.ts`

import { type EmailOtpType } from "@supabase/supabase-js";
import { redirect } from "next/navigation";
import { type NextRequest } from "next/server";

import { CLIENT_ROUTES } from "@/lib/constants";
import { createClient } from "@/utils/supabase/server";

export async function GET(request: NextRequest) {
    const { searchParams } = new URL(request.url);
    const token_hash = searchParams.get("token_hash");
    const type = searchParams.get("type") as EmailOtpType | null;
    const next = searchParams.get("next") ?? CLIENT_ROUTES.DASHBOARD;

    if (token_hash && type) {
        const supabase = await createClient();

        const { error } = await supabase.auth.verifyOtp({
            type,
            token_hash,
        });

        if (!error) {
            // redirect user to specified redirect URL or root of app
            redirect(next);
        }
    }

    // redirect the user to an error page with some instructions
    redirect("/error");
}

Now let’s add the Server Actions to handle the authentication from the client.

Supabase Actions `/actions/supabase.ts`

"use server";

import { headers } from "next/headers";
import { redirect } from "next/navigation";

import { CLIENT_ROUTES, EServerResponseCode } from "@/lib/constants";
import {
    ForgotPasswordFormSchema,
    ResetPasswordFormSchema,
    SignupFormSchema,
    type TForgotPasswordFormSchema,
    type TLoginFormSchema,
    type TResetPasswordFormSchema,
    type TSignupFormSchema,
} from "@/lib/constants";
import { createClient } from "@/utils/supabase/server";

export const signupAction = async (formData: TSignupFormSchema) => {
    const { email, password } = formData;

    const supabase = await createClient();
    const origin = (await headers()).get("origin");

    const validation = SignupFormSchema.safeParse(formData);

    if (!validation.success) {
        return {
            code: EServerResponseCode.FAILURE,
            error: validation.error,
            message: "Signup failed",
        };
    }

    const { error } = await supabase.auth.signUp({
        email,
        password,
        options: {
            emailRedirectTo: `${origin}/auth/callback`,
        },
    });

    if (error) {
        console.error(error.code + " " + error.message);

        return {
            code: EServerResponseCode.FAILURE,
            error,
            message: "Something went wrong! Please try again",
        };
    } else {
        return {
            code: EServerResponseCode.SUCCESS,
            message:
                "Signup successful! Please check your mail to confirm your account",
        };
    }
};

export const loginAction = async (formData: TLoginFormSchema) => {
    const { email, password } = formData;
    const supabase = await createClient();

    const { error } = await supabase.auth.signInWithPassword({
        email,
        password,
    });

    if (error) {
        console.error(error.code + " " + error.message);

        return {
            code: EServerResponseCode.FAILURE,
            error,
            message: "Invalid credentials",
        };
    } else {
        redirect(CLIENT_ROUTES.DASHBOARD);
    }
};

export const forgotPasswordAction = async (
    formData: TForgotPasswordFormSchema,
) => {
    const { email } = formData;
    const supabase = await createClient();
    const origin = (await headers()).get("origin");

    const validation = ForgotPasswordFormSchema.safeParse(formData);

    if (!validation.success) {
        return {
            code: EServerResponseCode.FAILURE,
            error: validation.error,
            message: "Password reset failed! Please try again",
        };
    }

    const { error } = await supabase.auth.resetPasswordForEmail(email, {
        redirectTo: `${origin}/auth/callback?redirect_to=/${CLIENT_ROUTES.RESET_PASSWORD}`,
    });

    if (error) {
        console.error(error.code + " " + error.message);

        return {
            code: EServerResponseCode.FAILURE,
            error,
            message: "Something went wrong! Please try again",
        };
    } else {
        return {
            code: EServerResponseCode.SUCCESS,
            message: "Success! Please check your mail to reset your password",
        };
    }
};

export const resetPasswordAction = async (
    formData: TResetPasswordFormSchema,
) => {
    const supabase = await createClient();
    const { password } = formData;

    const validation = ResetPasswordFormSchema.safeParse(formData);

    if (!validation.success) {
        return {
            code: EServerResponseCode.FAILURE,
            error: validation.error,
            message: "Password reset failed! Please try again",
        };
    }

    const { error } = await supabase.auth.updateUser({
        password: password,
    });

    if (error) {
        return {
            code: EServerResponseCode.FAILURE,
            error,
            message: "Something went wrong! Please try again",
        };
    } else {
        return {
            code: EServerResponseCode.SUCCESS,
            message: "Password changed successfully",
        };
    }
};

export const signOutAction = async () => {
    try {
        const supabase = await createClient();

        await supabase.auth.signOut();

        return {
            code: EServerResponseCode.SUCCESS,
            message: "User logged out successfully!",
        };
    } catch (error) {
        console.error(error);

        return {
            code: EServerResponseCode.FAILURE,
            message: "Failed to logout! Please try again",
        };
    }
};

Now let’s edit our Form Handlers to call these functions. Edit the following pages:

Signup `/app/signup/page.tsx`

async function onSubmit(values: TSignupFormSchema) {
    try {
      const response = await signupAction(values);

      if (isEmpty(response) || response.code !== EServerResponseCode.SUCCESS) {
        alert("Failed to signup!");
      } else {
        form.reset();
        alert(response.message);
      }
    } catch (error) {
      console.error("Signup failed:", error);
      alert("Failed to signup!");
    }
  }

Login `/app/login/page.tsx`

async function onSubmit(values: TLoginFormSchema) {
    try {
      const response = await loginAction(values);

      if (!isEmpty(response) && response.code === EServerResponseCode.FAILURE) {
        alert(response.message);
      }
    } catch (error) {
      console.error("Login failed:", error);
    }
  }

Forgot Password `/app/forgot-password/page.tsx`

async function onSubmit(values: TForgotPasswordFormSchema) {
    try {
      const response = await forgotPasswordAction(values);

      if (isEmpty(response) || response.code !== EServerResponseCode.SUCCESS) {
        alert("Failed to send verification link. Please try again");
      } else {
          alert("Verification link send. Please check your email");
        form.reset();
      }
    } catch (error) {
      console.error("Forgot password failed:", error);
      alert("Failed to send verification link. Please try again");
    }
  }

Reset Password `/app/reset-password/page.tsx`

// make sure you import the router from next/navigation

import { useRouter } from "next/navigation";

const router = useRouter();

async function onSubmit(values: TResetPasswordFormSchema) {
        try {
            const response = await resetPasswordAction(values);

            if (
                isEmpty(response) ||
                response.code !== EServerResponseCode.SUCCESS
            ) {
                alert(response.message);
                console.log(response.error);
            } else {
                form.reset();
                alert(response.message);
                router.push(CLIENT_ROUTES.DASHBOARD);
            }
        } catch (error) {
            console.error("Password reset error:", error);
            alert("Password reset failed! Please try again");
        }
    }

Our application is ready with Email authentication. The users will be able to sign up, login, and reset their password via these routes. Test these routes and actions carefully.

💡Tips

In case of any errors, look for any console logs in the browser console as well as the server terminal. Also check Supabase logs in your Supabase project.
For production you should always configure your own custom SMTP server to work with Supabase.
Always set a low time limit for the auth token generated using the /forgot-password route.

🔗 Check out the full code for this series here.

If you found this article useful, like, comment, and share, or just buy me a coffee?

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 1

Ojas — Sat, 15 Mar 2025 05:19:20 +0000

In this 4-part series, we will explore the process of creating robust, scalable, and secure web applications using the powerful combination of Next.js and Supabase. NextJS, a leading React framework, offers server-side rendering, static site generation, and performance optimization, making it perfect for building dynamic and SEO-friendly websites. Supabase, on the other hand, provides a comprehensive backend-as-a-service solution, featuring a PostgreSQL database, real-time data capabilities, and streamlined authentication services.

🔗 Check out the full code for this series here.

By integrating Supabase with Next.js, we can leverage the strengths of both platforms to create full-stack applications easily. Supabase simplifies backend operations by handling database management, authentication, and real-time updates, allowing us to focus on building exceptional user experiences. Meanwhile, Next.js enhances the front-end with its robust rendering capabilities and optimization features. This integration enables us to build fast, secure, and scalable applications without the complexity of managing servers or writing extensive backend code.

Throughout this series, we will go through the following key topics:

Setting Up Our Next.js App: We'll start by creating a brand new Next.js application using ShadCN and Tailwind CSS for styling. Next, we will create essential authentication pages, including Signup, Login, Forgot Password, and Reset Password.
Supabase Integration: Next, we'll create a Supabase project and configure routes and middlewares to handle authentication and basic route protection. This will ensure our application is secure and only authorized users can access sensitive data.
Google Authentication: We'll also set up a Google Cloud console project and integrate Google authentication into our application, providing users with a seamless login experience.
Advanced Database Management: Finally, we'll dive into advanced database management techniques by using Prisma ORM to create, migrate, and query tables. We will add triggers to create and manage user data and implement Row-Level Security (RLS) in our Supabase PostgreSQL tables. This ensures that only authenticated users can manipulate data owned by them.

To streamline form handling and validation, we will use React Hook Forms for managing form state and Zod for validating form data. These tools will help us create robust and user-friendly forms that enhance the overall user experience.

Initializing a Shadcn Project with Next.js and pnpm

Shadcn UI, combined with Tailwind CSS, offers a powerful way to build visually appealing web applications. Here's how to initialize a Shadcn project with Next.js using pnpm.

Install and Initialize Shadcn: Use the following command to initialize your project with default options:
```
pnpm dlx shadcn@latest init -d
```
When prompted, select Next.js as your project type. This command will set up your project with necessary dependencies and configurations. It includes setting up CSS variables for theming. The -d flag creates the project with default options.
Start Development:

Run your Next.js development server with:
```
pnpm dev
```

Our project is now ready to be customized and developed further. This setup provides a solid foundation for building modern web applications with Shadcn UI and Next.js.

Route creation for Authentication

In this section we will create four basic form pages using Shadcn UI: signup, login, forgot-password, and reset-password. We'll cover how to add necessary Shadcn components and create the forms.

Add Components Individually:

Use the following commands to add specific components:

pnpm dlx shadcn@latest add button input form card separator

Installing Dependencies

Let’s install “Zod” and “React Hook Forms” for form building and validations

pnpm add zod react-hook-form @hookform/resolvers

Let’s install “lucide-react” for beautiful icons

pnpm add lucide-react

Creating Form Schemas for Form Validation

We can create very refined and granular form schemas for custom validation using zod. Create a file lib/constants.ts

💡 Tip: These are just basic validations to show you how to add them. You should customise these validations as per your needs.

`lib/constants.ts`

// Auth Management

import { z } from "zod";

export const SignupFormSchema = z
    .object({
        email: z.string().email({
            message: "Please enter a valid email address.",
        }),
        password: z.string().min(8, {
            message: "Password must be at least 8 characters.",
        }),
        confirmPassword: z.string(),
    })
    .refine((data) => data.password === data.confirmPassword, {
        path: ["confirmPassword"],
        message: "Passwords do not match",
    });

export const LoginFormSchema = z.object({
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
  password: z.string().min(1, {
    message: "Password is required.",
  }),
})

export const ForgotPasswordFormSchema = z.object({
  email: z.string().email({
    message: "Please enter a valid email address.",
  }),
})

export const ResetPasswordFormSchema = z.object({
  password: z.string().min(8, {
    message: "Password must be at least 8 characters.",
  }),
  confirmPassword: z.string()
}).refine((data) => data.password === data.confirmPassword, {message: "Passwords do not match"})

export type TSignupFormSchema = z.infer<typeof SignupFormSchema>
export type TLoginFormSchema = z.infer<typeof LoginFormSchema>
export type TForgotPasswordFormSchema = z.infer<typeof ForgotPasswordFormSchema>
export type TResetPasswordFormSchema = z.infer<typeof ResetPasswordFormSchema>

We have created schemas using Zod and inferred their types using zod itself. Now let’s use these schemas to create forms using react-hook-form

Create Form Pages

Create a new file for each form page in your app directory.

Signup Page (`app/signup/page.tsx`):

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

import { Mail } from "lucide-react"
import { SignupFormSchema, TSignupFormSchema } from "@/lib/constants"

export default function SignupForm() {
  const form = useForm<TSignupFormSchema>({
    resolver: zodResolver(SignupFormSchema),
    mode: "onChange",
    defaultValues: {
      email: "",
      password: "",
      confirmPassword: "",
    },
  })

  function onSubmit(values: TSignupFormSchema) {
    // This would typically send the data to your API
    console.log(values)
  }

  return (
    <Card className="w-full max-w-md mx-auto mt-32">
      <CardHeader>
        <CardTitle className="text-2xl">Create an account</CardTitle>
        <CardDescription>Enter your information to get started.</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="you@example.com" type="email" {...field} />
                  </FormControl>
                  <FormDescription>Enter a valid email</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input placeholder="Create a password" type="password" {...field} />
                  </FormControl>
                  <FormDescription>Must be at least 8 characters</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
             <FormField
              control={form.control}
              name="confirmPassword"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Confirm password</FormLabel>
                  <FormControl>
                    <Input placeholder="Retype the password again" type="password" {...field} />
                  </FormControl>
                  <FormDescription>Must be same as the password</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full">
              Sign up
            </Button>

            <div className="relative my-4">
              <Separator />
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="bg-background px-2 text-xs text-muted-foreground">OR CONTINUE WITH</span>
              </div>
            </div>

            <Button type="button" variant="outline" className="w-full" onClick={() => console.log("Google sign-in")}>  
                <Mail size={16} className="mr-2" />
                Sign up with Google
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex justify-center border-t pt-6">
        <p className="text-sm text-muted-foreground">
          Already have an account?{" "}
          <a href="/login" className="text-primary font-medium hover:underline">
            Sign in
          </a>
        </p>
      </CardFooter>
    </Card>
  )
}

Login Page (`app/login/page.tsx`):

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { Separator } from "@/components/ui/separator"

import { Mail } from "lucide-react"
import { TLoginFormSchema, LoginFormSchema } from "@/lib/constants"

export default function LoginForm() {
  const form = useForm<TLoginFormSchema>({
    resolver: zodResolver(LoginFormSchema),
    mode: "onChange",
    defaultValues: {
      email: "",
      password: "",
    },
  })

  function onSubmit(values: TLoginFormSchema) {
    // This would typically send the data to your API
    console.log(values)
  }

  return (
    <Card className="w-full max-w-md mx-auto mt-32">
      <CardHeader>
        <CardTitle className="text-2xl">Welcome back</CardTitle>
        <CardDescription>Sign in to your account to continue</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="you@example.com" type="email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input placeholder="Enter your password" type="password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <div className="flex items-center justify-end">
              <Button variant="link"  className="px-0 font-normal" type="button">
                <a href="/forgot-password" className="text-primary font-medium hover:underline">Forgot password?</a>
              </Button>
            </div>
            <Button type="submit" className="w-full">
              Sign in
            </Button>

            <div className="relative my-4">
              <Separator />
              <div className="absolute inset-0 flex items-center justify-center">
                <span className="bg-background px-2 text-xs text-muted-foreground">OR CONTINUE WITH</span>
              </div>
            </div>

            <Button type="button" variant="outline" className="w-full" onClick={() => console.log("Google sign-in")}>
              <Mail size={16} className="mr-2" />
              Sign in with Google
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex justify-center border-t pt-6">
        <p className="text-sm text-muted-foreground">
          Don't have an account?{" "}
          <a href="/signup" className="text-primary font-medium hover:underline">
            Sign up
          </a>
        </p>
      </CardFooter>
    </Card>
  )
}

Forgot Password Page (`app/forgot-password/page.tsx`):

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"

import { TForgotPasswordFormSchema, ForgotPasswordFormSchema } from "@/lib/constants"

export default function SignupForm() {
  const form = useForm<TForgotPasswordFormSchema>({
    resolver: zodResolver(ForgotPasswordFormSchema),
    mode: "onChange",
    defaultValues: {
      email: "",
    },
  })

  function onSubmit(values: TForgotPasswordFormSchema) {
    // This would typically send the data to your API
    console.log(values)
  }

  return (
    <Card className="w-full max-w-md mx-auto mt-32">
      <CardHeader>
        <CardTitle className="text-2xl">Forgot password</CardTitle>
        <CardDescription>Enter your email to get a verification link</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="email"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="you@example.com" type="email" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full">
              Send Email
            </Button>
          </form>
        </Form>
      </CardContent>
      <CardFooter className="flex justify-center border-t pt-6">
        <p className="text-sm text-muted-foreground">
          Remember your password?{" "}
          <a href="/login" className="text-primary font-medium hover:underline">
            Sign in
          </a>
        </p>
      </CardFooter>
    </Card>
  )
}

Reset Password Page (`app/reset-password/page.tsx`):

"use client"

import { zodResolver } from "@hookform/resolvers/zod"
import { useForm } from "react-hook-form"

import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"

import { TResetPasswordFormSchema, ResetPasswordFormSchema } from "@/lib/constants"

export default function SignupForm() {
  const form = useForm<TResetPasswordFormSchema>({
    resolver: zodResolver(ResetPasswordFormSchema),
    mode: "onChange",
    defaultValues: {
      password: "",
      confirmPassword: "",
    },
  })

  function onSubmit(values: TResetPasswordFormSchema) {
    // This would typically send the data to your API
    console.log(values)
  }

  return (
    <Card className="w-full max-w-md mx-auto mt-32">
      <CardHeader>
        <CardTitle className="text-2xl">Reset password</CardTitle>
        <CardDescription>Create a new password</CardDescription>
      </CardHeader>
      <CardContent>
        <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>New password</FormLabel>
                  <FormControl>
                    <Input placeholder="Create a password" type="password" {...field} />
                  </FormControl>
                  <FormDescription>Must be at least 8 characters</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
             <FormField
              control={form.control}
              name="confirmPassword"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Confirm password</FormLabel>
                  <FormControl>
                    <Input placeholder="Retype the password again" type="password" {...field} />
                  </FormControl>
                  <FormDescription>Must be same as the password</FormDescription>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit" className="w-full">
              Save
            </Button>
          </form>
        </Form>
      </CardContent>
    </Card>
  )
}

🗒️ Things to be noted

The Zod library makes it easier to infer types from the Zod Schema and provides full type safety features of the TypeScript language.
Use Zod Resolver adapter to ensure our React Hook Form works with Zod validations.
The mode onChange ensures we validate the input on change of the values in the field.

{ ...mode: "onChange" }

The binding of other props, and errors in the form are taken by the render() function in the <Input> component via the { …field } prop.

As you can see, we are not handling the form onSubmit functions. We are just console logging the values from the form on submit.

Test out these pages by visiting their respective routes. In the next part of this series, we will create a Supabase project and add email signup and authentication to our app.

🔗 Check out the full code for this series here.

If you found this article useful, like, comment, and share, or just buy me a coffee?

Master Data Structures and Algorithms - A Practical Approach

Ojas — Fri, 14 Mar 2025 05:22:59 +0000

As a college student aiming to excel in Data Structures and Algorithms (DSA), it's crucial to approach learning with a strategic plan rather than investing in expensive courses. Spending money on a DSA course might not be the best use of your resources, as it often focuses on memorization rather than developing problem-solving skills essential for acing interviews. Here’s a week-by-week guide to help you master DSA without breaking the bank:

Week 1 & 2: Building Foundations

Familiarize Yourself with Platforms: Solve 20-30 easy problems on platforms like LeetCode or HackerRank. This step helps you understand the format and how to approach problems.
Train Your Brain: If you encounter a difficult problem, review the solution and attempt it again. This process trains your brain to think critically and approach problems systematically.

Week 3, 4, & 5: Deep Dive into Concepts

Optimize Previous Solutions: Take the easy problems you solved in the first two weeks and try to optimize them. This practice helps you understand how to improve efficiency.
Learn Data Structures: Focus on understanding different data structures (e.g., arrays, linked lists, trees, graphs) and how to implement them in your preferred programming language. Don’t rush into solving problems yet; just get familiar with the concepts.
Master Techniques: Learn and memorize key techniques such as hashing, sliding window, Kadane’s algorithm, etc. These tools will be invaluable in solving complex problems.
Identify Problem Patterns:
- Heaps: If a problem involves finding the Kth optimal element, it might be a heap question.
- Dynamic Programming (DP): If it asks for the most optimal result, it’s likely a DP problem. Start with recursion and then memoize it.
- Recursion: Problems involving choices often require recursion.
- Stacks and Queues: Develop your own patterns for these data structures.

Week 6 & 7: Practice with Standard Sets

Brute Force Approach: Start by coding the brute force solution for each problem.
Identify Patterns: Look for similarities between problems and identify the patterns involved.
Apply Learned Techniques: Recall the problem types and apply the techniques you’ve learned (e.g., hashing, DP).
Solve with Efficiency: Use the tools in your arsenal to optimize your solutions.

Afterwards: Consolidating Knowledge

By following this plan, you will have acquired most of the tools and techniques needed to tackle DSA problems effectively. The goal is to think about problems rationally rather than memorizing solutions from sheets. This approach not only saves you money but also equips you with the skills required to excel in coding interviews.

Resources

For further assistance, explore the following resources to enhance your learning journey:

By adopting this structured approach, you can master Data Structures and Algorithms without relying on expensive courses, ensuring you're well-prepared for coding interviews and future challenges in the field.

If you found this article useful, like, comment, and share, or just buy me a coffee?

DEV Community: Ojas

How I Boosted My Nuxt 3 Portfolio Speed by 3x (4.5s to 1.4s)

The Problem

SSR vs SSG — The Big Decision

Simplified Explanation

Real Use Cases

Optimization Techniques That Made the Difference

1. Route Prerendering Configuration

2. Lazy Loading Components with defineAsyncComponent()

3. Tree-Shaking Dependencies (Goodbye Full Lodash Import)

4. Image Optimization with NuxtImg and WebP Format

5. Client-Side Data Fetching with useLazyFetch()

6. Manual Code Splitting with Vite Rollup Options

7. Custom Composables for Performance

Results & Metrics

Key Takeaways

Conclusion

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 4

Adding Prisma and Defining Schemas

.env

prisma/schema.prisma

/package.json

Adding Triggers to Create and Delete a profile automatically when a new User Signs Up for our Application

triggers.sql

Adding Row Level Security RLS to your tables

Congratulations!

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 3

Creating a new Google Cloud Project and getting the Credentials

Adding Google authentication functionality to our Next JS application

Signup /app/signup/page.ts

And do the same in the file /app/login/page.tsx

💡Tips

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 2

Create a Supabase Project

Get your API keys

Creating Client and Server Supabase Client

Supabase Browser Client /utils/supabase/client.ts

Supabase Server Client /utils/supabase/server.ts

Dashboard Page /app/dashboard/page.tsx

Supabase Middleware /utils/supabase/middleware

Next.js Middleware /middleware.ts

Adding Supabase Callbacks and Server Actions to handle authentication

Callback /app/auth/callback/route.ts

Confirm /app/auth/confirm/route.ts

Supabase Actions /actions/supabase.ts

Signup /app/signup/page.tsx

Login /app/login/page.tsx

Forgot Password /app/forgot-password/page.tsx

Reset Password /app/reset-password/page.tsx

💡Tips

Secure Your Next.js App: Email & Google Authentication with Supabase, PostgreSQL RLS, and Triggers - Part 1

Initializing a Shadcn Project with Next.js and pnpm

Route creation for Authentication

Add Components Individually:

Installing Dependencies

Creating Form Schemas for Form Validation

lib/constants.ts

Create Form Pages

Signup Page (app/signup/page.tsx):

Login Page (app/login/page.tsx):

Forgot Password Page (app/forgot-password/page.tsx):

Reset Password Page (app/reset-password/page.tsx):

🗒️ Things to be noted

Master Data Structures and Algorithms - A Practical Approach

Week 1 & 2: Building Foundations

Week 3, 4, & 5: Deep Dive into Concepts

Week 6 & 7: Practice with Standard Sets

Afterwards: Consolidating Knowledge

Resources

2. Lazy Loading Components with `defineAsyncComponent()`

5. Client-Side Data Fetching with `useLazyFetch()`

`.env`

`prisma/schema.prisma`

`/package.json`

`triggers.sql`

Signup `/app/signup/page.ts`

And do the same in the file `/app/login/page.tsx`

Supabase Browser Client `/utils/supabase/client.ts`

Supabase Server Client `/utils/supabase/server.ts`

Dashboard Page `/app/dashboard/page.tsx`

Supabase Middleware `/utils/supabase/middleware`

Next.js Middleware `/middleware.ts`

Callback `/app/auth/callback/route.ts`

Confirm `/app/auth/confirm/route.ts`

Supabase Actions `/actions/supabase.ts`

Signup `/app/signup/page.tsx`

Login `/app/login/page.tsx`

Forgot Password `/app/forgot-password/page.tsx`

Reset Password `/app/reset-password/page.tsx`

`lib/constants.ts`

Signup Page (`app/signup/page.tsx`):

Login Page (`app/login/page.tsx`):

Forgot Password Page (`app/forgot-password/page.tsx`):

Reset Password Page (`app/reset-password/page.tsx`):