DEV Community: Anjan Shomodder

I Replaced ESLint & Prettier with This ⚡

Anjan Shomodder — Tue, 04 Nov 2025 13:54:02 +0000

I have been using ESLint & Prettier for many years. But after I have tried a fairly new tool called Biome & I am not going back. Biome is a single tool that replaces both ESLint and Prettier, offering faster performance, simpler configuration, and native multi-language support.

Why I Made the Switch 🤔

While ESLint and Prettier are great, well-tested tools, Here are some reasons why I decided to switch:

⚡ Significantly faster
🔧 Simpler configuration with one config file
🎯 Built-in support for multiple languages
🚀 Zero conflicts between linting and formatting

I have an in-depth video tutorial on my channel.

Getting Started 🚀

1. Installation

If you are using nextjs, then you can setup biome during project creation. otherwise first, install Biome in your project:

npm install -D -E @biomejs/biome

2. Initialize Configuration

Create your config file:

npx @biomejs/biome init # --jsonc for jsonc format

3. Editor Setup

VS Code

Install the official Biome VS Code extension
Add to your settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "biomejs.biome"
}

Neovim

Install the Biome LSP through Mason or something else, Linting should work out of the box. Formatting can be done through plugin or the following command

lua vim.lsp.buf.format()

Configuration Deep Dive ⚙️

Basic Structure

{
  "$schema": "https://biomejs.dev/schemas/latest/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true,
  },
  "files": {
    "ignoreUnknown": false,
    "includes": ["**", "!node_modules", "!.next", "!dist", "!build"],
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 100,
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
    },
  },
  "javascript": {
    "formatter": {},
  },
}

Explanation:

$schema: For intelisense
vcs: Git integration
files: File management. Use the includes array to specify which files to include/exclude. You can use ! patterns to exclude files.
formatter: Formatting options
linter: Linting rules
[language]: For language specific options

Formatting Options

Biome's formatter options are similar to Prettier. Syntax to configure formatter: formatter.<option>: <value>

{
  "formatter": {
    "indentStyle": "space", // "space" or "tab"
    "indentWidth": 2, // Number of spaces/tab width
    "lineWidth": 100, // Max line length
  },
}

Language-Specific Configuration

You can provide language-specific formatter settings:

{
  "javascript": {
    "formatter": {
      "quoteStyle": "single", // Single quotes for JS
      "jsxQuoteStyle": "double", // Double quotes for JSX
      "semicolons": "asNeeded", // Only when necessary
      "arrowParentheses": "asNeeded", // Minimal parentheses
    },
  },
}

Javascript means JavaScript, jsx, TypeScript and tsx.

Linting Rules 📝

Rule Groups

Biome organizes rules into logical groups:

Accessibility: a11y best practices
Correctness: Prevent bugs and errors
Performance: Optimize code performance
Security: Security best practices
Style: Code style consistency
Suspicious: Catch suspicious patterns

Rule Severity Levels

Biome uses three severity levels:

error: Throws error. Can be used to fail CI/CD builds
warn: Shows warnings but doesn't throw errors. But if you want to fail builds on warnings, you can use --error-on-warnings flag in CLI.
info: Informational only, never throws errors.

Syntax to configure rules: linter.rules.<group>.<ruleName>: <severity>

{
  "linter": {
    "rules": {
      "correctness": {
        "noUnusedVariables": "error", // Will fail builds
      },
    },
  },
}

Advanced Features 🔥

Git Integration

Ignore files inside `.gitignore` file

You can ignore all files mentioned in .gitignore file by passing useIgnoreFile option.

{
  "vcs": {
    "enabled": true,
    "useIgnoreFile": true,
  },
}

Process only changed files

Changed files are basically files that are changed & committed in a branch, seperate from the defaultBranch. This is useful when you have a pull request or you want to merge a PR. You can just run the files that are actually changed from your default Branch. You just need to add the defaultBranch. Preferably use the default github repo branch.

{
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "defaultBranch": "main",
  },
}

Then just run:

# Only lint changed files since main branch
biome check --changed

Process only staged files

Staged are files that are changed and added to index using git add. But not
committed yet.

# Only lint staged files
biome check --staged

Code Suppressions

Sometimes you need to ignore specific rules. Similar to Eslint disable comments.

// Ignore for one line
// biome-ignore lint/correctness/noUnusedVariables: This is a demo variable
const unusedVar = 'demo'

// Ignore entire file
// biome-ignore-all lint: Legacy code file

// Ignore range
// biome-ignore-start lint/style/useConst: Configuration object
var config = {}
// biome-ignore-end

Syntax: biome-ignore <category>/<group>/<rule>: <reason>

Code Actions (Auto-fixes)

Enable automatic fixes on save (VScode):

Biome assist is basically code actions for your editor. Check the doc for all the assist options. First enable code assist features in Biome config.

{
  "assist": {
    "enabled": true,
    "actions": {
      "source": {
        "organizeImports": "on",
        "useSortedAttributes": "on",
      },
    },
  },
}

Then add to your VS Code settings.json:

// settings.json
{
  "editor.codeActionsOnSave": {
    "source.fixAll.biome": "always",
    "source.organizeImports": "always",
  },
}

Domains (Framework-Specific Rules)

Enable rules for specific frameworks or projects:

{
  "linter": {
    "domains": {
      "react": "recommended", // React-specific rules
      "next": "recommended", // Next.js-specific rules
    },
  },
}

`biome check` vs `biome ci`

Biome check command runs both formatter and linter checks. It can also fix issues if --write flag is provided.
Biome ci is same as biome check but without the --write flag, making it suitable for CI environments.

Conclusion 🎯

Biome is really worth trying out if you are looking for better alternative to Eslint & Prettier. You can ask if you have any questions or need help with migration. So, are you going to try or switching to Biome ? Let me know in the comments below! 💬

Accepting Payments with Stripe Hosted and Embedded Checkout in Next.js

Anjan Shomodder — Sun, 03 Aug 2025 14:20:22 +0000

Stripe Checkout is one of the easiest ways to start accepting payments in your web app. In this post, we’ll walk through integrating both Stripe’s hosted checkout page and the embedded checkout experience in a Next.js project—no database required, just a simple product list and a checkout button.

You can also check the video tutorial here:

How Stripe Checkout Works

The flow is straightforward:

Your server (Next.js API or server action) sends product details (name, price, currency, etc.) to Stripe.
Stripe creates a Checkout Session and returns a session object containing a unique URL (for hosted) or a client secret (for embedded).
Redirect the user to this URL (hosted) or render the payment form in your app (embedded).
User completes payment on Stripe’s secure page or embedded form.
Stripe redirects the user back to your site (success or cancel URL).

Project Structure

If you want to learn how to setup stripe with Next.js, you can check the video tutorial here:

Here’s a quick look at the relevant files:

src/app/products.js: Exports an array of product objects (name, price, quantity, image, description).
src/components/ProductList.jsx: Renders the product list.
src/components/CheckoutButton.jsx: Triggers the checkout session.
src/actions/createCheckoutSession.js: Server action to create a Stripe Checkout Session.
src/app/embeded/page.js: Implements the embedded checkout UI.

Creating a Checkout Session

The core logic lives in createCheckoutSession.js:

export async function createCheckoutSession({ ui_mode = 'hosted' }) {
  const sessionParams = {
    payment_method_types: ['card'],
    mode: 'payment',
    currency: 'usd',
    ui_mode,
    line_items: products.map(product => ({
      price_data: {
        currency: 'usd',
        unit_amount: product.price,
        product_data: {
          name: product.name,
          description: "product.description,"
          images: [product.image],
        },
      },
      quantity: product.quantity,
    })),
    customer_email: 'thatanjan@gmail.com',
    allow_promotion_codes: true,
  }

  if (ui_mode === 'hosted') {
    sessionParams.success_url = 'http://localhost:3000/success'
    sessionParams.cancel_url = 'http://localhost:3000/cancel'
  } else {
    sessionParams.return_url = 'http://localhost:3000/success'
  }

  const session = await stripe.checkout.sessions.create(sessionParams)

  if (ui_mode !== 'hosted') {
    return session.client_secret
  }

  if (session.url) {
    redirect(session.url)
  }
}

Explanation:

We define a function that creates a Stripe Checkout Session. The ui_mode parameter controls whether we use the hosted Stripe page or an embedded version.
sessionParams is an object that configures the checkout session:
- payment_method_types: Only allows card payments.
- mode: 'payment': Indicates a one-time payment (not a subscription).
- currency: Sets the currency (USD in this example).
- line_items: Maps each product to Stripe’s required format, including price, name, description, and image.
- customer_email: Optionally pre-fills the email field at checkout.
- allow_promotion_codes: Lets users enter promo codes at checkout.
Depending on the ui_mode, we set either success_url and cancel_url (for hosted) or return_url (for embedded).
We call stripe.checkout.sessions.create to create the session.
If using embedded mode, we return the client_secret for use with Stripe’s embedded checkout component.
If using hosted mode, we redirect the user to the Stripe-hosted checkout page using the session URL.

Triggering Checkout from the UI

The CheckoutButton component calls the server action. When clicked, it creates a session and redirects the user to Stripe’s hosted page.

'use client'

const CheckoutButton = props => {
  const [isLoading, setIsLoading] = useState(false)

  const onClick = async () => {
    setIsLoading(true)

    await createCheckoutSession({})
    setIsLoading(false)
  }

  return (
    <Button onClick={onClick}>{isLoading ? 'Loading...' : 'Checkout'}</Button>
  )
}

Explanation:

The button’s click handler calls createCheckoutSession.
For hosted mode, the user is redirected to Stripe’s secure payment page.

Handling Currencies

Stripe expects prices in the smallest currency unit (e.g., cents for USD). For non-decimal currencies like Japanese Yen, 1 JPY = 1 unit.

Explanation:

Always multiply your price by 100 for currencies like USD or EUR (e.g., $10.00 → 1000).
For currencies without subunits, just use the integer value.

Customer Creation

By default, Stripe creates a “guest” customer for each payment. You can control this by passing customer_email, or by using the customer_creation parameter for more advanced scenarios.

Explanation:

Passing customer_email pre-fills the email field and links the payment to that email.
Setting customer_creation: 'always' forces Stripe to create a new customer record for every checkout.

Using Stripe Embedded Checkout

Besides the hosted checkout page, Stripe also offers an embedded checkout experience. This allows you to display the payment form directly within your app, keeping users on your site during the payment process.

Here’s how you can implement it in Next.js:

'use client'

import {
  EmbeddedCheckout,
  EmbeddedCheckoutProvider,
} from '@stripe/react-stripe-js'

import { createCheckoutSession } from '@/actions/createCheckoutSession'
import { stripePromise } from '@/lib/stripeClient'

export default function Checkout() {
  return (
    <div>
      <h1 className='text-2xl font-bold mb-4'>Embedded Checkout</h1>

      <EmbeddedCheckoutProvider
        stripe={stripePromise}
        options={{
          fetchClientSecret: () =>
            createCheckoutSession({ ui_mode: 'embedded' }),
        }}
      >
        <EmbeddedCheckout />
      </EmbeddedCheckoutProvider>
    </div>
  )
}

Explanation:

The component uses Stripe’s EmbeddedCheckoutProvider and EmbeddedCheckout from @stripe/react-stripe-js.
stripePromise is your Stripe publishable key, loaded with Stripe’s JS SDK.
The options prop includes a fetchClientSecret function, which calls your server action (createCheckoutSession) with ui_mode: 'embedded'. This returns a client_secret needed to initialize the embedded checkout.
The EmbeddedCheckout component renders the Stripe payment form directly inside your app, providing a seamless user experience.

When to use Embedded Checkout?

If you want to keep users on your site instead of redirecting them to Stripe.
For a more integrated look and feel, while still letting Stripe handle all sensitive payment details.

Conclusion

Stripe’s hosted and embedded checkout options make it fast and secure to accept payments in your Next.js app. You don’t need to handle sensitive card data or build a custom payment form—Stripe takes care of it all. For more advanced use cases, explore custom flows using Stripe Elements.

Want to see the full code?

Check out the GitHub repo and try it yourself!

If you found this helpful, let me know in the comments or reach out with questions. Happy coding!

How to set up Stripe with Nextjs

Anjan Shomodder — Wed, 23 Jul 2025 11:30:17 +0000

Create Nextjs project

npx create-next-app <app-name>

Stripe Sandbox

Create a Stripe sandbox from the Stripe dashboard
Copy the Stripe publishable key and secret key
Add the keys to the .env.local file in the project.

NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY=pk_test_51Ra9j34F0AnCZjIgVY1KAjeZeDwATbLElhomZ4T2kRKaRNtbuQv766PP9HswNnrKpBqEwvJgcBzEJXveEO6COFLR00P76vyj8r
STRIPE_SECRET_KEY=sk_test_51Ra9j34F0AnCZjIgaNUVIzfYaFxTx3eXcSgHwgIdTJrpBKpWnQPlEVPylQLW1Cu8bGJdNQOVyiDnEssjbcVzGXtW005x2fgsEP

You can also check the video tutorial on youtube.

Install Stripe Packages

npm i stripe @stripe/react-stripe-js @stripe/stripe-js

stripe: Core packages
@stripe/react-stripe-js: React components for Stripe web elements
@stripe/stripe-js: Stripe.js library for client-side operations

Create Stripe instances

You need Stripe instances on both the client and server sides.

Create a file lib/stripe.js in the root directory

import 'server-only'

import Stripe from 'stripe'

export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY || '')

Explanation:

import 'server-only': Ensures this file is only used on the server side. Optional but recommended to prevent accidental client-side usage.
new Stripe(...): Initializes the Stripe instance with your secret key from environment variables.
Create a file lib/stripeClient.js in the root directory

import { loadStripe } from '@stripe/stripe-js'

export const stripePromise = loadStripe(
  process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY || '',
)

Explanation:

loadStripe(...): Loads the Stripe.js library with your publishable key, which is used on the client side.
loadStripe returns a promise that resolves to a Stripe object, which will be used on the client side.

That's it! You now have the setup for integrating Stripe with your Next.js application.

If this video helped you, please subscribe to my YouTube channel for more content like this. If you have any questions or suggestions, feel free to leave a comment below. Thanks for watching!

How to add Anonymous Authentication to your Next.js App using Supabase

Anjan Shomodder — Sun, 01 Jun 2025 15:33:56 +0000

Why Anonymous Authentication?

Let's say you have an e-commerce app, and you want to allow users to add products
to cart and complete checkout. The process should be as simple as possible for the user. However, if you ask them to sign up or log in before they can add products to their cart, they might lose interest and leave the app. This is where anonymous authentication comes in handy. An anonymous account is a temporary account you create on behalf of the user. Now, users won't have to create an account to purchase products. And, of course, you can convert them to permanent accounts, which I will explain at the end.

Video Tutorial

Enabling Anonymous Authentication in Supabase

Create a new Project in Supabase.com
- You might need to create a new organization if you don't have one.
- Then give your project name and db password
- Once the project is created, you will have the project URL and anon key. You can use these to connect to your project.
- Note that these are public keys, and you can share them. Like Firebase, you protect your data with rules.
Go to the Authentication section in Supabase
Then go to the sign section
Enable Anonymous Authentication

Get the complete source code from here

Adding Anonymous Authentication to Next.js

Create a server action in Next.js

'use server'
const signinAnonymously = async () => {
  const supabase = await createClientForServer()

  const { error } = await supabase.auth.signInAnonymously()

  if (error) {
    console.error('Error signing in anonymously:', error)
    return
  }

  console.log('Signed in anonymously successfully')

  revalidatePath('/')
}

Create a button in your Next.js component to trigger the server action
- Add formAction attribute to the button to call the server action

<form className='flex gap-4 mb-4'>
  <button
    className='bg-green-600 text-white rounded px-4 py-2 hover:bg-green-700 transition'
    formAction={signinAnonymously}
  >
    Login Anonymously
  </button>
</form>

Now, Just click the button to sign in anonymously, and you should see a new user on the dashboard in Supabase

Get the current user in Next.js

const supabase = await createClientForServer()

const {
  data: { user },
  error,
} = await supabase.auth.getUser()

if (error) {
  console.error('Error fetching user:', error)
} else {
  console.log('User data:', user)
}

- Just use the `supabase.auth.getUser()` method to get the current user in your Next.js app.

Check if the user is anonymous

The user object will have an is_anonymous property that you can check to see if the user is anonymous.

Convert Anonymous User to Permanent User

To convert an anonymous user to a permanent user, you can use the updateUser method in Supabase.

'use server'
const updateUser = async formData => {
  const supabase = await createClientForServer()

  const { error } = await supabase.auth.updateUser({
    email: formData.get('email'),
    password: formData.get('password'),
  })

  if (error) {
    console.error('Error updating user:', error)
    return
  }

  console.log('User updated successfully, Please confiirm your email')
}

Create a form to update the user

<form
  action={updateUser}
  className='flex flex-col gap-4 border rounded-lg p-6 shadow w-full sm:w-96 bg-gray-50 dark:bg-neutral-900'
>
  <h2 className='text-lg font-semibold mb-2'>Update User</h2>
  <label className='flex flex-col gap-1'>
    <span className='text-sm font-medium'>Email</span>
    <input
      type='email'
      name='email'
      className='border rounded px-3 py-2 bg-white dark:bg-neutral-800'
      required
      autoComplete='off'
    />
  </label>
  <label className='flex flex-col gap-1'>
    <span className='text-sm font-medium'>Password</span>
    <input
      type='password'
      name='password'
      className='border rounded px-3 py-2 bg-white dark:bg-neutral-800'
      required
      autoComplete='off'
    />
  </label>
  <button
    type='submit'
    className='mt-2 bg-blue-600 text-white rounded px-4 py-2 hover:bg-blue-700 transition'
  >
    Update
  </button>
</form>

Now, when you submit the form, it will send a confirmation email to the user to verify their email address.
If the email is not verified, the account will remain anonymous.

Login after email verification

Once you verify the email, the user will be able to log in using the email and password.

<form
          className='flex flex-col gap-4 border rounded-lg p-6 shadow w-full sm:w-96 bg-gray-50 dark:bg-neutral-900'
          action={loginWithPassword}
        >
          <h2 className='text-lg font-semibold mb-2'>Login</h2>
          <label className='flex flex-col gap-1'>
            <span className='text-sm font-medium'>Email</span>
            <input
              type='email'
              name='email'
              className='border rounded px-3 py-2 bg-white dark:bg-neutral-800'
              required
              autoComplete='off'
            />
          </label>
          <label className='flex flex-col gap-1'>
            <span className='text-sm font-medium'>Password</span>
            <input
              type='password'
              name='password'
              className='border rounded px-3 py-2 bg-white dark:bg-neutral-800'
              required
              autoComplete='off'
            />
          </label>
          <button
            type='submit'
            className='mt-2 bg-green-600 text-white rounded px-4 py-2 hover:bg-green-700 transition'
          >
            Login
          </button>
        </form>

const loginWithPassword = async formData => {
  const supabase = await createClientForServer()

  const { error } = await supabase.auth.signInWithPassword({
    email: formData.get('email'),
    password: formData.get('password'),
  })

  if (error) {
    console.error('Error logging in with password:', error)
    return
  }

  console.log('User logged in successfully')

  revalidatePath('/')
}

Conclusion

Tha's it! You have successfully implemented anonymous authentication in your Next.js app using Supabase. Subscribe to my YouTube channel for more tutorials like this. If you have any questions, feel free to ask in the comments section below. Happy coding! 😊

Videos you might like

How to Add Google OAuth in a Local Supabase Project

Anjan Shomodder — Tue, 13 May 2025 12:27:06 +0000

How to Add Google OAuth in a Local Supabase Project

Setting up Google OAuth in a local Supabase project can be tricky, but with the right steps, you can get it working seamlessly. Here's a quick guide to help you through the process.

Video Tutorial

If you prefer a video tutorial, check out my YouTube video on this topic:

But if you want more detail explanation, check out this video tutorial. I have explained everything in detail.

Prerequisites

Docker: Ensure Docker is installed and running.
Supabase CLI: Install the Supabase CLI.

You can check these videos if you need help with the installation:

Steps to Set Up Google OAuth

1. Initialize a Local Supabase Project

Navigate to your project root and run:

  supabase init

This creates a config.toml file.
Start the Supabase project:

  supabase start

Note: The first run may take time to download images and running containers.

You will get the output like this:

2. Configure Environment Variables

Store the API URL and anon key in your .env.local file:

  NEXT_PUBLIC_SUPABASE_URL=<your_supabase_api_url>
  NEXT_PUBLIC_SUPABASE_ANON_KEY=<your_anon_key>

3. Set Up a Google Cloud Project

Create a new project in Google Cloud Console.
Go to API & Services > OAuth consent screen:
- Fill in the required fields.
- Set the user type to External.
Go to Clients tab & Create an OAuth client:
- Application type: Web application.
- Javascript origins can be left empty.
- Add two redirect URIs:

1. `http://localhost:54321/auth/v1/callback`
2. `http://127.0.0.1:54321/auth/v1/callback` (Optional)
   ![ ](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8caxozl8vu60foro9lu.png)

> Note: If you are using a different port, make sure to update the redirect URI accordingly.

Go to Data Access tab:
- Click on Add or Remove Scopes.
- Select the following scopes (Usually the first 3) & save:
Then go to the OAuth Client
- Copy the Client ID and Client Secret to a new file .env in your project root.
- Add the following lines to your .env file:
```
SUPABASE_AUTH_GOOGLE_CLIENT_ID=<your_client_id>
SUPABASE_AUTH_GSUPABASE_AUTH_GOOGLE_SECRET_KEYOOGLE_CLIENT_SECRET=<your_client_secret>
```

4. Update Supabase Config

Open config.toml and search for the auth.external section.
You should see a section like this:

    [auth.external.apple]
    enabled = false
    client_id = ""
    # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
    secret = "env(SUPABASE_AUTH_EXTERNAL_APPLE_SECRET)"
    # Overrides the default auth redirectUrl.
    redirect_uri = ""
    # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
    # or any other third-party OIDC providers.
    url = ""
    # If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
    skip_nonce_check = false

Duplicate the code and change the section name to auth.external.google and update the values:

  [auth.external.google]
  enabled = true
  client_id = "env(SUPABASE_AUTH_GOOGLE_CLIENT_ID)"
  # DO NOT commit your OAuth provider secret to git. Use environment variable substitution instead:
  secret = "env(SUPABASE_AUTH_GOOGLE_SECRET_KEY)"
  # Overrides the default auth redirectUrl.
  redirect_uri = "http://localhost:54321/auth/v1/callback"
  # Overrides the default auth provider URL. Used to support self-hosted gitlab, single-tenant Azure,
  # or any other third-party OIDC providers.
  url = ""
  # If enabled, the nonce check will be skipped. Required for local sign in with Google auth.
  skip_nonce_check = true

Set enabled to true and skip_nonce_check to true.
Set client_id and secret to the environment variables you created in the .env file.
Set redirect_uri to http://localhost:54321/auth/v1/callback. Same as the one you added in the Google Cloud project.
- Now search for site_url under [auth] section and set it to http://localhost:3000:

5. Restart Supabase

After updating the config, restart Supabase:

  supabase stop
  supabase start

6. Implement Google Sign-In

You can use the nextjs repository to test the Google sign-in. You can find the repository here. If you want to create your own, follow these steps:

Create a server action:

'use server'

export const handleGoogleSignIn = async () => {
  const supabase = await createClientForServer()

  const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:3000'

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: 'google',
    options: {
      redirectTo: `${baseUrl}/auth/callback`,
    },
  })

  if (error) {
    console.error('Error signing in with Google:', error)
    return
  }

  if (data) {
    console.log('Google sign-in data:', data)
    redirect(data.url) // Redirect to the URL provided by Supabase
    // Handle the response as needed
  }
}

Note: If you are using localhost as base url, make sure the redirect url is in supabase config is also using localhost. If you are using ip like 127.0.0.1, make sure the redirect url is also using 127.0.0.1. If they don't match you will get an error from google.

Create a new file app/auth/callback/route.js:

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClientForServer } from '@/utils/supabase/server'

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClientForServer()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

Add a form with buttton to call the handleGoogleSignIn function:

<form action={handleGoogleSignIn}>
  <button type='submit' className='btn btn-xl '>
    Sign in with Google
  </button>
</form>

For detailed instruction, check out the video on youtube.

7. Test Google Sign-In

Run your development server:

  npm run dev

Click the "Sign in with Google" button and follow the prompts.
If everything is set up correctly, you should be redirected to your app after signing in.
You can use supabase.auth.getUser() to check if the user is logged in.

Recap

Update the config.toml file with Google OAuth settings.
Restart Supabase after changes.
Ensure redirect URIs are correctly configured.

That's it! You now have Google OAuth working in your local Supabase project. If you found this guide helpful, feel free to share it and check out my other tutorials for more tips.

Videos you might want to watch

Send Emails from Next.js with Resend and React Email

Anjan Shomodder — Tue, 01 Apr 2025 12:08:01 +0000

In this tutorial, we'll explore how to send emails from a Next.js application using Resend, including custom email templates, domain verification, scheduling, and file attachments.

What are Resend and React Email?

Resend is an email API service that allows developers to send emails from their applications with minimal setup. React Email provides components for building responsive email templates using React.

You can check the video tutorial on the Cules Coding channel here:

Project Setup

Let's start with a basic Next.js application. Our project structure looks like this:

src/
├── actions/
│   └── sendEmail.js  // Server action to handle email sending
├── app/
│   ├── page.jsx      // Simple form to collect user input
│   ├── layout.js     // Root layout
│   └── globals.css
└── emails/
    └── MyEmail.jsx   // Email template component

This structure separates our concerns nicely — server actions for backend logic, the app directory for Next.js pages, and a dedicated emails directory for our email templates.

First, install the required packages:

npm install resend @react-email/components react-email

We're installing three packages:

resend for the email API.
@react-email/components for pre-built email components.
react-email for the environment to preview our emails.

Creating Email Templates with React Email

React Email provides components for building responsive email templates. Let's create a template in src/emails/MyEmail.jsx:

import {
  Tailwind,
  Body,
  Container,
  Head,
  Heading,
  Html,
  Img,
  Link,
  Preview,
  Section,
  Text,
  Font,
} from '@react-email/components'

const MyEmail = ({ name = 'Anjan' }) => {
  const previewText = 'Your free guide is here! Download now.'
  const downloadUrl = 'https://reallygreatsite.com/download'

  return (
    <Html>
      <Tailwind>
        <Head>
          <title>Your Free Guide Is Here</title>
          <Font
            fontFamily='Inter'
            fallbackFontFamily='Arial'
            webFont={{
              url: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap',
              format: 'woff2',
            }}
            fontWeight={400}
            fontStyle='normal'
          />
        </Head>
        <Preview>{previewText}</Preview>
        <Body className="bg-[#e5e5e3] font-['Inter',Arial,sans-serif] py-10">
          <Container className='mx-auto max-w-[600px] text-center'>
            {/* Email content here */}
            <Heading className="text-5xl leading-tight font-extrabold text-[#333333] my-8 font-['Inter',Arial,sans-serif] uppercase tracking-tight">
              YOUR FREE GUIDE IS HERE {name.toUpperCase()} 🎉
            </Heading>

            {/* More content... */}

            <Section className='my-10'>
              <Link
                href={downloadUrl}
                className='bg-[#333333] rounded-full text-white text-base font-semibold no-underline uppercase py-4 px-10 inline-block'
              >
                DOWNLOAD NOW
              </Link>
            </Section>
          </Container>
        </Body>
      </Tailwind>
    </Html>
  )
}

export default MyEmail

Explanation:

This template uses React Email components like Html, Body, Heading, and Link to create a responsive email that works across email clients.
The Tailwind component allows us to use Tailwind CSS for styling.
We're also accepting a name prop to personalize the email, illustrating how to make dynamic email templates.

Preview Email Templates

To preview your email templates during development, add this script to your package.json:

"scripts": {
  "email:dev": "email dev --dir ./src/emails --port 4000"
}

Explanation:

This script sets up a development server specifically for previewing email templates.
We're pointing it to our src/emails directory.
The server runs on port 4000 to avoid conflicts with Next.js on port 3000.
You can run npm run email:dev to see your templates at http://localhost:4000.

Sending Emails with Resend

Create a server action to handle email sending in src/actions/sendEmail.js:

'use server'

import MyEmail from '@/emails/MyEmail'
import { Resend } from 'resend'

const sendEmail = async formData => {
  const name = formData.get('name')

  const resend = new Resend(process.env.RESEND_API_KEY)

  const { data, error } = await resend.emails.send({
    from: 'onboarding@resend.dev', // Development only
    to: 'your-email@example.com',
    subject: 'Welcome to Resend!',
    react: <MyEmail name={name} />,
  })

  if (error) {
    console.error(error)
    return { success: false }
  }

  console.log(data)
  return { success: true }
}

export default sendEmail

Explanation:

This server action uses the 'use server' directive to ensure it runs on the server.
It extracts the name from the form data.
It initializes Resend with your API key.
It sends an email with your React template.
For development, you can use the onboarding@resend.dev email address.
The user's name is passed to the template to personalize it.

Then create a form in src/app/page.jsx to trigger the email:

import sendEmail from '@/actions/sendEmail'

export default function Home() {
  return (
    <div>
      <form
        action={sendEmail}
        className='flex flex-col items-center justify-center h-screen'
      >
        <input
          type='text'
          name='name'
          placeholder='Name'
          className='border border-gray-500 rounded mb-3 p-4'
        />
        <button className='bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded'>
          Send Email
        </button>
      </form>
    </div>
  )
}

Explanation:

This simple form collects a name.
The action attribute invokes our server action when submitted.
In Next.js, the form data is passed directly to our server action, making it straightforward to handle user input.

Setting Up a Custom Domain

For production, you'll need to use and verify a custom domain with Resend:

Please check the YouTube video:

Once verified, update your sender email:

from: '<name>@yourdomain.com', // <name> can be anything

Scheduling Emails

Resend allows scheduling emails using natural language or date formats:

const { data, error } = await resend.emails.send({
  from: 'noreply@yourdomain.com',
  to: 'recipient@example.com',
  subject: 'Scheduled Email',
  react: <MyEmail name={name} />,
  scheduledAt: 'in 2 min', // or specific date: '2023-04-30T09:30:00Z'
})

Explanation:

The scheduledAt parameter supports natural language like "in 2 min" or "tomorrow at 9am."
It's useful for sending reminders, welcome sequences, or other time-sensitive emails.

Adding Attachments

To include file attachments, use the attachments array in the send method. Here is an example where we are expecting an image file from the form:

Add a file input to your form:

<input
  className='border border-gray-500 rounded mb-3 p-4'
  type='file'
  accept='image/*'
  name='image'
/>

Explanation:

This file input restricts uploads to images.
The name="image" attribute must match the name we use in formData.get('image') in our server action.

const sendEmail = async formData => {
  const name = formData.get('name')
  const imageFile = formData.get('image')

  // Convert file to base64
  const arrayBuffer = await imageFile.arrayBuffer()
  const buffer = Buffer.from(arrayBuffer)
  const base64Image = buffer.toString('base64')

  const resend = new Resend(process.env.RESEND_API_KEY)

  const { data, error } = await resend.emails.send({
    from: 'noreply@yourdomain.com',
    to: 'recipient@example.com',
    subject: 'Email with Attachment',
    react: <MyEmail name={name} />,
    attachments: [
      {
        filename: imageFile.name,
        content: base64Image,
      },
    ],
  })
}

Explanation:

This code handles file uploads through the form.
It converts files to base64 (required for email attachments).
It adds the base64-encoded file to the email.
Be aware of file size limits — Next.js server actions have a 1MB default limit per request.

Limitations and Considerations

Styling: React Email only supports inline styles or Tailwind CSS.
UI Libraries: External libraries like Material UI or Chakra UI aren't supported by React Email.
Scheduling + Attachments: Attachments cannot be used with scheduled emails.

Conclusion

Sending emails from your Next.js application is straightforward with Resend and React Email. You can:

Create dynamic, responsive templates using React Email.
Handle all the sending logic through Resend’s simple API.

For more information, check out the:

How to set up a Supabase project Locally

Anjan Shomodder — Tue, 25 Feb 2025 14:23:35 +0000

To set up a Supabase project locally, follow these steps:

Install Docker: Ensure you have Node.js and Docker installed on your machine. Supabase uses Docker to run its services locally.
You can also use this guide for docker setup on linux:
Install Supabase CLI:
- Check the documentation for your operating system. If you are using arch, you can use:
```
 yay -S supabase-bin
 #
 sudo npm install -g supabase
```

You can also check the video tutorial on YouTube:

Initialize a Supabase Project:
- Navigate to your project directory in the terminal.
- Run the following command to initialize a new Supabase project:
```
 supabase init
```
- This will create a supabase directory with necessary configuration files.
Start Supabase Locally:
- In the terminal, run:
```
 supabase start
```
- This command will start the Supabase services using Docker. It includes a Postgres database, authentication, and storage services. You will get necessary urls and keys.

         API URL: http://127.0.0.1:54321
     GraphQL URL: http://127.0.0.1:54321/graphql/v1
   S3 Storage URL: http://127.0.0.1:54321/storage/v1/s3
          DB URL: postgresql://postgres:postgres@127.0.0.1:54322/postgres
      Studio URL: http://127.0.0.1:54323
    Inbucket URL: http://127.0.0.1:54324
      JWT secret: super-secret-jwt-token-with-at-least-32-characters-long
        anon key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0
   service_role key: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSIsImV4cCI6MTk4MzgxMjk5Nn0.EGIM96RAZx35lJzdJsyH-qQwv8Hdp7fsn3W0YpN81IU
   S3 Access Key: 625729a08b95bf1b7ff351a663f3a23c
   S3 Secret Key: 850181e4652dd023b7a98c58ae0d2d34bd487ee0cc3254aed6eda37307425907
       S3 Region: local

You can get the url and keys again by running:
```
 supabase status
```
- Stop Supabase Project:
To stop the Supabase services, run:
```
 supabase stop
```

How to Install Docker on Arch Linux

Anjan Shomodder — Tue, 11 Feb 2025 14:05:11 +0000

Today, you will learn how to install docker on Linux or more specifically, Arch Linux. You can follow the steps for debian and Red Hat based systems as well. Just the package installation will be bit different.

Check the docs:

Video

Step 1: Update the System (Optional)

Update the system with:

sudo pacman -Syu

Step 2: Install Docker

Install Docker using the following command:

sudo pacman -S docker

Step 3: Start and Enable Docker Service

Start the Docker service and enable it to start on boot:

sudo systemctl start docker
sudo systemctl enable docker

Step 4: Add User to Docker Group

To avoid using sudo with every Docker command, add your user to the Docker group:

sudo usermod -aG docker $USER

After adding the user to the Docker group, log out and log back in for the changes to take effect.

Step 5: Verify Docker Installation

Verify that Docker is installed correctly by running:

docker --version

You can also run a test container to ensure everything is working:

docker run hello-world

That's it! Docker should now be installed and ready to use on your Arch Linux system.

How to add Email and Password authentication to Nextjs with Supabase Auth

Anjan Shomodder — Thu, 09 Jan 2025 11:20:04 +0000

In this blog, we will learn how to add Email-Password based authentication to your Nextjs app with Supabase Auth. I will cover:

Setup a SMTP server with Brevo for sending emails
Change email templates for the email confirmation
Add Email authentication to Nextjs using server actions and components

For better understanding, you can watch the video tutorial here.

Setup SMTP server with Brevo

Create a Brevo account, and you need to create an organization.
Click on the Organization name on the top right and go to the SMTP & API section.
Click on the Create a new SMTP key button and give it a name.
Copy the SMTP key.

You need to add the SMTP details to the supabase.

Go to your Supabase project and go to settings
Go to authentication from the Configuration section.
Scroll down and you will see the SMTP Settings section.
Enable and fill out the details. Some of the information you can get from Brevo's SMTP & API page.
- From Email: {Your email}
- From Name: {Your name}
- SMTP Port: 587
- SMTP Host: smtp-relay.brevo.com
- SMTP Username: Your Brevo email (Check the SMTP & API page)
- SMTP Password: The SMTP key you copied earlier

SMTP setup is done.

Change email template

Go to the Email Templates section in the Authentication settings (supabase dashboard).
Click on the Confirm Signup template.
Paste the following code:

<h2>Confirm your signup</h2>

<p>Follow this link to confirm your user:</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
    >Confirm your email</a
  >
</p>

Note: You can customize the email template as you want. Make sure the href is correct on the link.

Add authentication to Nextjs

Create a server action:

import { createClientForServer } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

export const signupWithEmailPassword = async formData => {
  const supabase = await createClientForServer()

  const { data, error } = await supabase.auth.signUp({
    email: formData.get('email'),
    password: formData.get('password'),
  })

  if (error) {
    console.log('error', error)
    return {
      success: null,
      error: error.message,
    }
  }

  return {
    success: 'Please check your email',
    error: null,
  }
}

Explanation:

We created the supabase client using the createClientForServer function.
We used the signUp method to create a new user with the email and password.
You can get input data using get method on the formData object.
If there is an error, we return the error message; otherwise we return a success message to check the email.

Now add a form:

<form action={signinWithEmailPassword}>
  <input type='email' name='email' placeholder='Email' />
  <input type='password' name='password' placeholder='Password' />
  <button type='submit'>Submit</button>
</form>

Explanation:

We created a form and added the action attribute to call the server action. You can use the useActionState hook to display messages to the user.

That's it! You have successfully added email and password authentication to your Nextjs app with Supabase Auth. If you have any questions, feel free to ask in the comments.

I am looking for a new job opportunity. Please feel free to contact me if you or your team are hiring.

Contacts:
Email: thatanjan@gmail.com
Portfolio: https://thatanjan.com/
Linkedin: https://www.linkedin.com/in/thatanjan/
Github: https://github.com/thatanjan/

Next, you can check these videos:

Happy coding! 🚀

How to add Github oAuth in Nextjs with Supabase Auth | Login with Github

Anjan Shomodder — Wed, 08 Jan 2025 14:47:39 +0000

In this blog, we will learn how to add Github oAuth to your Nextjs app with Supabase Auth. I will cover:

Setup a github oAuth app for oAuth
How to add github oAuth to your Nextjs app using server actions and compnents

You can watch the video tutorial here for better understanding.

Setup nextjs with supabase

You can check this blog to learn how to setup nextjs with supabase.

Setup a github oAuth app

Go to Github settings -> Developer settings -> OAuth Apps -> New OAuth App

Add the following details:

Application name: Your app Name
Homepage URL: Your app URL
Callback URL:
- Go to supabase dashboard -> Auth -> Providers -> Github
- Enable and copy the callback url. This is the redirect uri.
Click Register application and copy the Client ID and Client Secret and paste it in supabase dashboard -> Auth -> Providers -> Github.

Create a server action to add github oAuth

Create a new file src/utils/actions.js and add the following code:

'use server'
import { createClientForServer } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

const signInWith = provider => async () => {
  const supabase = await createClientForServer()

  const auth_callback_url = `${process.env.SITE_URL}/auth/callback`

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: auth_callback_url,
    },
  })

  if (error) {
    console.log(error)
  }

  redirect(data.url)
}

export const signinWithGithub = signInWith('github')

Explanation:

We call the signInWithOAuth method with the provider github and the auth_callback_url.
Auth callback url is the url where the user will be redirected after the login. <domain>/auth/callback.
We redirect the user to the data.url which is the github login page.
Create a new file src/apps/auth/callback/route.js for an api route and add the following code:

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClientForServer } from '@/utils/supabase/server'

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClientForServer()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

This code is just copied from the Supabase docs. It exchanges the code for a session and redirects the user to the website. And finally user will be logged in logged in.

Now add the UI:

import { signinWithGithub } from '@/utils/actions'

const Component = () => {
  return (
    <form>
      <button className='btn' formAction={signinWithGithub}>
        Sign in with Github
      </button>
    </form>
  )
}

That's it. Now you have added github oAuth to your Nextjs app with Supabase Auth. You can now get the user session data and use it in your app.

If you have any questions, feel free to ask in the comments.
I am looking for a new job opportunity. Please feel free to contact me if you or your team are hiring.

Contacts:
Email: thatanjan@gmail.com
Portfolio: https://thatanjan.com/
Linkedin: https://www.linkedin.com/in/thatanjan/
Github: https://github.com/thatanjan/

Next, you can check these videos:

Happy coding! 🚀

How to add Google oAuth in Nextjs with Supabase Auth | Login with Google

Anjan Shomodder — Mon, 06 Jan 2025 14:25:04 +0000

This blog will teach you how to add Google oAuth to your Nextjs app with Supabase Auth. I will cover:

Setup a Google Cloud project for oAuth
How PKCE flow works
How to add Google oAuth to your Nextjs app using server actions and components
How to get user session data

You can watch the video tutorial here for better understanding.

Setup nextjs with supabase

You can check this blog to learn how to setup nextjs with supabase.

Setup a Google Cloud project for oAuth

Go to Google Cloud Console and create a new project.
Go to APIs & Services -> OAuth consent screen and fill in the required fields.
- User Type: External
- App Name: Your app name
- User Support Email: Your Email
- Authorized domains: Supabase Project URL
- Developer contact information: Your Email
Add scopes (first three):
- email
- profile
- openid

Save and go to the dashboard. Then:

Go to APIs & Services -> Credentials -> Create Credentials -> OAuth client ID
Application type: Web application
Name: Your app name
Authorized redirect URIs: <domain>/api/auth/callback (eg. http://localhost:3000/api/auth/callback for development)
Redirect Uri:
- Go to supabase dashboard -> Auth -> Providers -> Google
- Enable and copy the callback url. This is the redirect uri.
Click Create and copy the Client ID and Client Secret.

How PKCE flow works

The server creates a secret code and encrypts that code.
The server sends the encrypted code to the OAuth server.
The OAuth server stores the encrypted code and sends an authorization token to the server.
The server sends the authorization token to the client plus the secret code.
The OAuth server decrypts and compares the encrypted code with the secret code.
If the codes match, the OAuth server sends the access token(JWT) to the server. And now you are logged in.

The secret code is called code_verifier and the encrypted code is called code_challenge.

Create a server action to add google oAuth

Create a new file, src/utils/actions.js and add the following code:

'use server'
import { createClientForServer } from '@/utils/supabase/server'
import { redirect } from 'next/navigation'

const signInWith = provider => async () => {
  const supabase = await createClientForServer()

  const auth_callback_url = `${process.env.SITE_URL}/auth/callback`

  const { data, error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: auth_callback_url,
    },
  })

  if (error) {
    console.log(error)
  }

  redirect(data.url)
}

const signinWithGoogle = signInWith('google')

Explanation:

We call the signInWithOAuth method with the provider google and the auth_callback_url.
Auth callback url is the url where the user will be redirected after the login. <domain>/auth/callback.
We redirect the user to the data.url which is the google login page.
Create a new file src/apps/auth/callback/route.js for an api route and add the following code:

import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClientForServer } from '@/utils/supabase/server'

export async function GET(request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  const next = searchParams.get('next') ?? '/'

  if (code) {
    const supabase = await createClientForServer()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }

  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

This code is just copied from the Supabase docs. It exchanges the code for a session and redirects the user to the website. And finally, the user will be logged in.

Now add the UI:

import { signinWithGoogle } from '@/utils/actions'

const Component = () => {
  return (
    <form>
      <button className='btn' formAction={signinWithGoogle}>
        Sign in with Google
      </button>
    </form>
  )
}

That's it. You have added Google oAuth to your Nextjs app with Supabase Auth. Your app can now access and use user session data.

If you have any questions, feel free to ask in the comments.

I am looking for a new job opportunity. Please feel free to contact me if you or your team are hiring.

Contacts:
Email: thatanjan@gmail.com
Portfolio: https://thatanjan.com/
Linkedin: https://www.linkedin.com/in/thatanjan/
Github: https://github.com/thatanjan/

Next, you can check these videos:

Happy coding! 🚀

How to setup Supabase with Nextjs for authentication | Supabase Auth

Anjan Shomodder — Sat, 28 Dec 2024 15:10:09 +0000

What is Supabase?

Supabase enables developers to build full-stack apps by offering authentication, database, storage, and real-time features. This Backend as a Service (BaaS) is a popular alternative to Firebase and is built with open-source technologies.

Supabase Auth enables easy app authentication, supporting OAuth, email-password, and passwordless methods.

Note: This blog is a part of a video series on my YouTube channel. You can also check the video version.

How to set up the Supabase project?

Create a new project in Supabase. You might need to create a new organization if you don't have one.
Then give your project name and db password
Once the project is created, you will have the project URL and anon key. You can use these to connect to your project. Note that these are public keys, and you can share them. Like Firebase, you protect your data with rules.

Now we need a nextjs app.

How to set up with Nextjs 15?

Create a new Nextjs project:

npx create-next-app supabase-auth-yt

Install Supabase client:

npm install @supabase/supabase-js @supabase/ssr

I have also installed daisyui(a tailwind ui library) for styling:

npm i -D daisyui

Create a new file called .env.local and add your supabase URL and anon key:

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

Create a new file called utils/supabase/server.js and add the following code:

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

export async function createClientForServer() {
  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 {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  )
}

To interact with Supabase from the server, we must create a client for the server-side code. Also code is copied from the supabase docs.

For client-side code, we need to create a client in the utils/supabase/client.js file:

'use client'

import { createBrowserClient } from '@supabase/ssr'

const createClientForBrowser = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  )

export default createClientForBrowser

Now, you can use these clients to interact with the supabase from your nextjs project.

Next, you can check these videos:

DEV Community: Anjan Shomodder

I Replaced ESLint & Prettier with This ⚡

Why I Made the Switch 🤔

Getting Started 🚀

1. Installation

2. Initialize Configuration

3. Editor Setup

VS Code

Neovim

Configuration Deep Dive ⚙️

Basic Structure

Formatting Options

Language-Specific Configuration

Linting Rules 📝

Rule Groups

Rule Severity Levels

Advanced Features 🔥

Git Integration

Ignore files inside .gitignore file

Process only changed files

Process only staged files

Code Suppressions

Code Actions (Auto-fixes)

Domains (Framework-Specific Rules)

biome check vs biome ci

Conclusion 🎯

Accepting Payments with Stripe Hosted and Embedded Checkout in Next.js

How Stripe Checkout Works

Project Structure

Creating a Checkout Session

Triggering Checkout from the UI

Handling Currencies

Customer Creation

Using Stripe Embedded Checkout

Conclusion

How to set up Stripe with Nextjs

Create Nextjs project

Stripe Sandbox

Install Stripe Packages

Create Stripe instances

How to add Anonymous Authentication to your Next.js App using Supabase

Why Anonymous Authentication?

Video Tutorial

Enabling Anonymous Authentication in Supabase

Adding Anonymous Authentication to Next.js

Get the current user in Next.js

Check if the user is anonymous

Convert Anonymous User to Permanent User

Login after email verification

Conclusion

Videos you might like

How to Add Google OAuth in a Local Supabase Project

How to Add Google OAuth in a Local Supabase Project

Video Tutorial

Prerequisites

Steps to Set Up Google OAuth

1. Initialize a Local Supabase Project

2. Configure Environment Variables

3. Set Up a Google Cloud Project

4. Update Supabase Config

5. Restart Supabase

6. Implement Google Sign-In

7. Test Google Sign-In

Recap

Videos you might want to watch

Send Emails from Next.js with Resend and React Email

What are Resend and React Email?

Project Setup

Creating Email Templates with React Email

Preview Email Templates

Sending Emails with Resend

Setting Up a Custom Domain

Scheduling Emails

Adding Attachments

Limitations and Considerations

Conclusion

How to set up a Supabase project Locally

How to Install Docker on Arch Linux

Video

Step 1: Update the System (Optional)

Ignore files inside `.gitignore` file

`biome check` vs `biome ci`