DEV Community: remusris

Open github url in gitingest via chrome extension and keyboard shortcut

remusris — Sun, 23 Feb 2025 06:58:20 +0000

I came across this phenomenal tool called gitingest. It's especially perfect when working with an LLM because you can dump any github url into it and it'll extract it into plain text with a directory tree and everything.

There is an official chrome extension with the gitingest project, however there's no keyboard shortcut to convert a github url into a gitingest url. I decided to take matters into my own hands and do it myself.

Below is the link to the repo for this chrome extension, beware you'll need npm and pnpm installed so that you can build it yourself.

https://github.com/remusris/git-ingest-chrome-extension

The instructions are in the README, but I pasted them below too.

if you don't have npm installed go install npm
install npm here

then install pnpm
install pnpm here

pnpm install

pnpm build

Enter chrome://extensions on your browser (like a page to navigate to)

Turn on developer mode in the top right-hand corner

Click "Load Unpacked"

Navigate to the folder where you have the repo installed then go to

.output -> mv3 -> select this folder

(on macOS the .output might not be invisible because it's a "hidden" file so you need to press command + shift + . to show hidden files)

After installing go to keyboard shortcuts

Edit the "Change GitHub link to Gitingest link" trigger with the keyboard shortcut of your choosing

Chrome Extension MV3 Template : Supabase Auth, Plasmo, Tailwinds CSS & Shadcn UI

remusris — Sun, 13 Aug 2023 23:50:02 +0000

Setting Up Plasmo, Tailwinds & Shadcn-UI

Setting Up Plasmo

pnpm create plasmo
# OR
yarn create plasmo
# OR
npm create plasmo

Get started with plasmo with the base command below, stick to pnpm in this guide as that’s what we’re going to use.

https://docs.plasmo.com/framework

Adding Tailwinds CSS Manually — Can be Skipped

pnpm create plasmo --with-tailwindcss

You can jump past setting up tailwinds by using the command above but if you want to know how to manually add tailwinds css to your plasmo project, continue reading on. The link below is also another good reference for this.

https://docs.plasmo.com/quickstarts/with-tailwindcss

pnpm i -D tailwindcss postcss autoprefixer

npx tailwindcss init

With your project set up using the create plasmo command we can get started with setting up tailwinds css.

/**
 * @type {import('postcss').ProcessOptions}
 */
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {}
  }
}

Create a file called postcss.config.js Paste the code above into that file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Create a file called style.css, this is equivalent to a globals.css file that you’ll commonly find in other tailwind projects.

Create a src folder and place the popup.tsx and style.css files into it

Change the path in the tsconfig.ts file to the source folder for the import alias ~.

{
  "extends": "plasmo/templates/tsconfig.base",
  "exclude": [
    "node_modules"
  ],
  "include": [
    ".plasmo/index.d.ts",
    "./**/*.ts",
    "./**/*.tsx"
  ],
  **"compilerOptions": {
    "paths": {
      "~*": [
        "./src/*"
      ]
    },**
    "baseUrl": "."
  }
}

Setting Up Shadcn-UI

Now that tailwinds has been added we’re going to add Shadcn-UI via the cli. Follow along or use the guide below as a reference.

https://ui.shadcn.com/docs/installation/next

pnpm dlx shadcn-ui@latest init

run this command

Select the following options shown in the screenshot.

Point the globals.css requirement to the style.css file located inside the src directory.

Use the import alias ~ for importing components within the src directory, this is optional but recommended. Do the same for the lib/util, make sure NOT to do ~~lib/utils.ts~~ as it automatically adds the ts file ending.

How to use tailwinds in the `popup.tsx` file

You must import the style.css, use the import alias that we set up

import "~style.css"

Supabase Auth for MV3 Chrome Extension

Install SupabaseJS client

pnpm add @supabase/supabase-js

Introduction to Auth in a Chrome Extension

Authentication is essentially a JWT that gets stored in the form of an access token and refresh token. When the access token expires, the refresh token gets exchanged for a new access token. In the next section, we talk about how access tokens and refresh tokens get accessed and stored in a chrome MV3 chrome extension.

Access Token & Refresh Token Storage — Three Methods

There are three methods we’ll cover regarding how to store and access and a refresh tokens. The first method leverages the chrome.storage api without modifying any of the options in the supabase createClient function. Basically you manually create the logic verifying whether the token has expired, something that the createClient functionpart of the supabaseJS library typically does in the background of a webapp. This “manual” method can work with any api that delivers you an access token & refresh token. The second method modifies the supabase createClient function to leverage the chrome.storage api in the background. The third method points that storage to the plasmo storage api, working only in the plasmo framework.

Method one will be referred to as supabaseManual, method two will be referred to as supabaseAuto and the third method will be referred to as supabasePlasmo.

Setting Up the Supabase Client

import { createClient } from "@supabase/supabase-js"

// this is the default for method 1, we leave all the options on by default
export const supabaseManualStorage = createClient(
  process.env.PLASMO_PUBLIC_SUPABASE_URL,
  process.env.PLASMO_PUBLIC_SUPABASE_KEY
)

// this options is for method 2, method 3 also has it's own custom options
const optionsForMethod2 = {
  auth: {
      autoRefreshToken: true,
      persistSession: true,
      detectSessionInUrl: true,
      storage: {
          async getItem(key: string): Promise<string | null> {
              // @ts-ignore
              const storage = await chrome.storage.local.get(key);
              return storage?.[key];
          },
          async setItem(key: string, value: string): Promise<void> {
              // @ts-ignore
              await chrome.storage.local.set({
                  [key]: JSON.parse(value)
              });
          },
          async removeItem(key: string): Promise<void> {
              // @ts-ignore
              await chrome.storage.local.remove(key);
          }
      }
  }
}

export const supabaseAuto = createClient(
  process.env.PLASMO_PUBLIC_SUPABASE_URL,
  process.env.PLASMO_PUBLIC_SUPABASE_KEY,
  optionsForMethod2
)

For the case of this example, we have two different supabase variables to export, one in the form of supabaseManual and supabaseAuto the former being used for the manual storage method and the ladder being used for modifying the storage variable in supabase createClient() config to use either chrome.storage or the plasmo storage api. In a typical working project the variable should just be called supabase not supabaseAuto or supabaseManual but for this demo we’re doing it for clarification.

The rest of the supabaseManual functionality gets explained in the section covering the BGSW in the background.ts file.

The inspiration for supabaseAuto came from this github thread below.

https://gist.github.com/lcmchris/da979cbbf56c9452b6e5847ece7ee6ca

In optionsForMethod2 a function was created for each of the methods used in the chrome.storage api, getItem, setItem and removeItem.

Why `getItem`, `setItem` and `removeItem` ?

The method below only works if you have the library installed on your local device, I was not able to find these types in the posted github repo below.

https://github.com/supabase/supabase-js/blob/master/src/SupabaseClient.ts

Go to the @supabase/supabase-js folder in the node_modules folder, go to types.ts

node_modules → @supabase/supabase-js → src → lib → types.ts

Command + click (control + click on Windows) on GoTrueClient imported function

Command + click (control + click on Windows) on SupportedStorage

That should take you to the highlighted line.

Plasmo Storage API Method

The plasmo storage api method is the easiest solution but limited only to the plasmo extension framework. Use the link below as a reference, however, the instructions are less clear.

https://docs.plasmo.com/quickstarts/with-supabase

pnpm add @plasmohq/storage

Add the plasmo storage api to your project

import { createClient } from "@supabase/supabase-js"
import { Storage } from "@plasmohq/storage"

const storage = new Storage({
  area: "local"
})

const options = {
    auth: {
        storage,
    autoRefreshToken: true,
    persistSession: true,
    detectSessionInUrl: true
    }
}

// this is for method 2 & 3
export const supabasePlasmo = createClient(
  process.env.PLASMO_PUBLIC_SUPABASE_URL,
  process.env.PLASMO_PUBLIC_SUPABASE_KEY, 
    options
)

Create a variable called storage that bridges to the plasmo storage api and that should be all. There’s still some more setup for the popup.tsx page but that will be covered in the following sections.

Background Service Worker BGSW — `Background.ts`

Where to put `background.ts`?

The background.ts file can be put in a folder called background named as index.ts in the background folder. The reason why you might want to use the folder method is that you can nest a messaging folder within the background folder. Otherwise, you can just stick to background.ts inside the src folder not inside a background folder.

Adding & Removing Access Tokens Manually

In the supabaseManual method there a few base operations for accessing and modifying access tokens, getSupabaseKeys() , validateToken() , getKeyFromStorage() , setKeyInStorage() and removeKeysFromStorage() . Point to the accessToken inside an object variable that stores the string value for the specific chrome.storage location. While technically this is not required trying to remember the exact string each time will get tedious.

// init chrome storage keys
const chromeStorageKeys = {
  supabaseAccessToken: "supabaseAccessToken",
  supabaseRefreshToken: "supabaseRefreshToken",
  supabaseUserData: "supabaseUserData",
  supabaseExpiration: "supabaseExpiration",
  supabaseUserId: "supabaseUserId"
}

You can add any number of desired properties to the chromeStorageKeys object as one sees fit for your needs.

// get the supabase keys
async function getSupabaseKeys() {
  const supabaseAccessToken = await getKeyFromStorage(
    chromeStorageKeys.supabaseAccessToken
  )
  const supabaseExpiration = (await getKeyFromStorage(
    chromeStorageKeys.supabaseExpiration
  )) as number
  const userId = await getKeyFromStorage(chromeStorageKeys.supabaseUserId)

  return { supabaseAccessToken, supabaseExpiration, userId }
}

The getSupabaseKeys() function is basically an intermediary for the more basic getKeyFromStorage() method.

// get the key from storage
async function getKeyFromStorage(key) {
  return new Promise((resolve, reject) => {
    chrome.storage.local.get(key, (result) => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError)
      } else {
        resolve(result[key])
      }
    })
  })
}

The getKeyFromStorage() method puts the chrome.storage.local.get promise into an async function, it’s quite limited in its functionality but we abstract away everything else in the getSupabaseKeys() function.

//setting keys in local storage
async function setKeyInStorage(
  keyValuePairs: Record<string, any>
): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    chrome.storage.local.set(keyValuePairs, () => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError)
      } else {
        resolve()
      }
    })
  })
}

The setKeyInStorage() basically uploads the key into storage since there’s no “update” functionality when using chrome.storage api.

//removing keys from local storage
async function removeKeysFromStorage(keys: string[]): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    chrome.storage.local.remove(keys, () => {
      if (chrome.runtime.lastError) {
        reject(chrome.runtime.lastError)
      } else {
        resolve()
      }
    })
  })
}

The removeKeysFromStorage() comes in handy when the user signs out and or their access token expired, thus requiring the user to sign back in again.

With the getSupabaseKeys method returning a supabaseAccessToken, supabaseExpiration and userId, the next step can be taken for validating a request.

async uploadFunction() {
    const { supabaseAccessToken, supabaseExpiration, userId } = await getSupabaseKeys()
  await validateToken(supabaseAccessToken, supabaseExpiration)

    // do something here
    // either send a message to the bgsw or upload data to the server
}

The code block above is a template for an example function, where the accessToken and expiration time is being outputted from the getSupabaseKeys() function into the validateToken() function. With the validated access token a request can be sent back to the server and or a message sent to the BGSW.

// validate the token
async function validateToken(supabaseAccessToken, supabaseExpiration) {
  const currentTime = Math.floor(Date.now() / 1000)
  if (!supabaseAccessToken) {
    throw new Error("No Supabase access token found")
  }
  if (currentTime > supabaseExpiration) {
    handleMessage({ action: "refresh", value: null })
    throw new Error("Supabase access token is expired")
  }
}

This is the validateToken() function, that gets leveraged in the handleMessage() function for the supabaseManual method.

Message Handlers for `supabaseAuto` & `supabaseManual`

// the event listener
chrome.runtime.onMessage.addListener((message, sender, response) => {
//   handleMessageManual(message, sender, response)
  handleMessageAutomatic(message, sender, response)
  return true
})

A chrome.runtime.onMessage event listener needs to be running in the background, where the appropriate handleMessage() function will be active contingent on whether you’re using the supabaseAuto or supabaseManual method. The supabasePlasmo method does not use messaging for authentication between the popup.tsx and BGSW, thus it has no message handler function.

`handleMessageManual()` for `supabaseManual`

// handle message functionality for manual keys
async function handleMessageManual({ action, value }, sender?, response?) {
  if (action === "signin") {
    console.log("requesting auth")

    const { data, error } = await supabase.auth.signInWithPassword(value)
    if (data && data.session) {
      await setKeyInStorage({
        [chromeStorageKeys.supabaseAccessToken]: data.session.access_token,
        [chromeStorageKeys.supabaseRefreshToken]: data.session.refresh_token,
        [chromeStorageKeys.supabaseUserData]: data.user,
        [chromeStorageKeys.supabaseExpiration]: data.session.expires_at,
        [chromeStorageKeys.supabaseUserId]: data.user.id
      })
      console.log("User data stored in chrome.storage.sync")
      response({ data, error })
    } else {
      console.log("failed login attempt", error)
      response({ data: null, error: error })
    }
  } else if (action === "signup") {
    const { data, error } = await supabase.auth.signUp(value)
    if (data) {
      await setKeyInStorage({
        [chromeStorageKeys.supabaseAccessToken]: data.session.access_token,
        [chromeStorageKeys.supabaseRefreshToken]: data.session.refresh_token,
        [chromeStorageKeys.supabaseUserData]: data.user,
        [chromeStorageKeys.supabaseExpiration]: data.session.expires_at,
        [chromeStorageKeys.supabaseUserId]: data.user.id
      })
      console.log("User data stored in chrome.storage.sync")
      response({ message: "Successfully signed up!", data: data })
    } else {
      response({ data: null, error: error?.message || "Signup failed" })
    }
  } else if (action === "signout") {
    const { error } = await supabase.auth.signOut()
    if (!error) {
      await removeKeysFromStorage([
        chromeStorageKeys.supabaseAccessToken,
        chromeStorageKeys.supabaseRefreshToken,
        chromeStorageKeys.supabaseUserData,
        chromeStorageKeys.supabaseExpiration,
        chromeStorageKeys.supabaseUserId
      ])
      console.log("User data removed from chrome.storage.sync")
      response({ message: "Successfully signed out!" })
    } else {
      response({ error: error?.message || "Signout failed" })
    }
  } else if (action === "refresh") {
    const refreshToken = (await getKeyFromStorage(
      chromeStorageKeys.supabaseRefreshToken
    )) as string
    if (refreshToken) {
      const { data, error } = await supabase.auth.refreshSession({
        refresh_token: refreshToken
      })

      if (error) {
        response({ data: null, error: error.message })
        return
      }

      console.log("token data", data)

      if (!data || !data.session || !data.user) {
        await handleMessageManual(
          { action: "signout", value: null },
          sender,
          console.log
        )
        response({
          data: null,
          error: "Session expired. Please log in again."
        })
      } else {
        await setKeyInStorage({
          [chromeStorageKeys.supabaseAccessToken]: data.session.access_token,
          [chromeStorageKeys.supabaseRefreshToken]: data.session.refresh_token,
          [chromeStorageKeys.supabaseUserData]: data.user,
          [chromeStorageKeys.supabaseExpiration]: data.session.expires_at,
          [chromeStorageKeys.supabaseUserId]: data.user.id
        })

        console.log("User data refreshed in chrome.storage.sync")
        response({ data: data })
      }
    } else {
      response({ data: null, error: "No refresh token available" })
    }
  }
}

The BGSW is the bridge between the accessTokens located in the chrome.storage api and the popup.tsx file. It covers the base operations of signin, signout, signup, and refresh.

`handleMessageAutomatic()` for `supabaseAuto`

// handler for automatic messages
async function handleMessageAutomatic({ action, value }, sender?, response?) {
    if (action === "signin") {

        const { data, error } = await supabaseAuto.auth.signInWithPassword(value);

        if (data && data.session) {
            response({ data, error });
        } else {
            console.log("failed login attempt", error);
            response({ data: null, error: error });
        }

    } else if (action === "signup") {
        const { data, error } = await supabaseAuto.auth.signUp(value);

        if (data) {
            response({ message: "Successfully signed up!", data: data });
        } else {
            response({ data: null, error: error?.message || "Signup failed" });
        }

    } else if (action === "signout") {
        const { error } = await supabaseAuto.auth.signOut();
        if (!error) {
            response({ message: "Successfully signed out!" });
        } else {
            response({ error: error?.message || "Signout failed" });
        }

    } else if (action === "getsession") {
        console.log("inside get session")
        const { data, error } = await supabaseAuto.auth.getSession();

        console.log("data inside getSession", data)

        if (data && data.session) {
            const sessionExpiration = data.session.expires_at;
            const currentTime = Math.floor(Date.now() / 1000); // Convert to seconds

            if (sessionExpiration <= currentTime) {
                response({ error: "Session has expired" });
            } else {
                console.log("going to send data")
                response({ data: data });
            }

        } else {
            response({ error: "No session available" });
        }

    } else if (action === "refreshsession") {
        const { data, error } = await supabaseAuto.auth.refreshSession();

        response({ data: data, error: error });
    }
}

A message handler for the supabaseAuto method is not 100% required, because we’re interacting with a third-party api it’s best to call the supabase functions from the BGSW as that is where any external apis function best in a chrome extension. Unlike supabaseManual there’s chrome.storage functions being leveraged as all of that is happening in the background.

Creating `Popup.tsx` Components w/Messaging to BGSW

pnpm dlx shadcn-ui@latest add form

Add the built-in form component from the Shadcn-UI library.

pnpm dlx shadcn-ui@latest add input

Also, add in the input component

pnpm dlx shadcn-ui@latest add toast

Add the toast component to signify to the user if an incorrect login took place

// react stuff
import { useEffect, useState } from "react"

// supabase stuff
import type { Provider, User } from "@supabase/supabase-js"
import { supabase } from "./core/supabase"

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

// shadcn-ui form components imports
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage
} from "~components/ui/form"
import { Toaster } from "~components/ui/toaster"
import { useToast } from "~components/ui/use-toast"

// tailwind stuff
import "~style.css"

// the supabase variable inputs
import { supabaseAuto, supabaseManual, supabasePlasmo } from "./core/supabase"

Add all the imports

// creating a form schema 
const formSchema = z.object({
  username: z.string().min(2).max(50),
  password: z.string().min(8)
})

Create a form schema component, the min and max characters for username and password are contingent on your requirements, they’re not necessary. This will be the only function outside the React component.

const { toast } = useToast();

const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      password: "",
    },
  });

Instantiate the useToast() function so that the toaster will work and create a variable called form for the useForm hook coming from the react-hook-forms library.

`useEffect()` for `supabaseManual`

useEffect(() => {
    setLoadingUser(true)

    chrome.storage.local.get(
      [
        chromeStorageKeys.supabaseAccessToken,
        chromeStorageKeys.supabaseExpiration,
        chromeStorageKeys.supabaseUserData
      ],
      (result) => {
        if (result && result[chromeStorageKeys.supabaseAccessToken]) {
          const currentTime = Math.floor(Date.now() / 1000) // convert to seconds
          const timeUntilExpiration =
            result[chromeStorageKeys.supabaseExpiration] - currentTime

          const refreshAndUpdate = () => {
            chrome.runtime.sendMessage({ action: "refresh" }, (response) => {
              if (response.error) {
                console.log("Error refreshing token: " + response.error)
              } else {
                if (response.data && response.data.session) {
                  console.log("Token refreshed successfully")
                  setUser(response.data.user)
                  setExpiration(response.data.session.expires_at)
                } else {
                  console.log("Error: session data is not available")
                }
              }
              setLoadingUser(false)
            })
          }

          if (timeUntilExpiration <= 0) {
            // Token is expired, request a refresh and update user and expiration
            console.log("Session expired, refreshing token")
            refreshAndUpdate()
          } else {
            // Token is not expired, set user data and expiration
            setUser(result[chromeStorageKeys.supabaseUserData])
            setExpiration(result[chromeStorageKeys.supabaseExpiration])

            if (timeUntilExpiration < 24 * 60 * 60) {
              // less than 24 hours left, request a refresh and update user and expiration
              console.log("Token is about to expire, refreshing token")
              refreshAndUpdate()
            } else {
              setLoadingUser(false) //Add this line
            }
          }
        } else {
          setLoadingUser(false) //Add this line
        }
      }
    )
  }, [])

Once the component is mounted a useEffect() needs to run to get keys from storage, this useEffect() will differ for the supabaseAuto and supabaseManual methods. Basically, it checks whether or not there’s an active session, if the token expired then it refreshes the session using the refreshAndUpdate() method. The refreshAndUpdate() function could be moved outside of the useEffect() and into the react component to then be called inside the useEffect() but that’s just semantics.

`useEffect()` for `supabaseAuto`

useEffect(() => {
    chrome.runtime.sendMessage({ action: "getsession" }, (response) => {
      // console.log('sending getsession from popup')
      console.log("response", response)

      if (response.error) {
        // If session has expired, attempt to refresh it
        if (response.error === "Session has expired") {
          console.log("Session has expired, attempting to refresh...")
          refreshSession()
        } else {
          console.log("Error getting session: " + response.error)
        }
      } else if (response.data && response.data.session) {
        console.log("Session retrieved successfully")
        console.log("Session data: ", response.data.session)
        console.log("User data: ", response.data.session.user)
        setUser(response.data.session.user)
      } else {
        console.log("Error: session data is not available")
      }
    })
  }, [])

The useEffect() for supabaseAuto is far less verbose than for supabaseManual method because the chrome.storage.local is not being pulled from chrome.storage.local manually as those operations are happening in the background.

`handleSignin()`, `handleSignout()` and `refreshSession()` Methods

// create a function to handle login
  async function handleLogin(username: string, password: string) {
    try {
      // Send a message to the background script to initiate the login
      chrome.runtime.sendMessage(
        { action: "signin", value: { email: username, password: password } },
        (response) => {
          if (response.error) {
            // alert("Error with auth: " + response.error.message);

            toast({
              description: `Error with auth: ${response.error.message}`
            })

            console.log("Error with auth: " + response.error.message)
          } else if (response.data?.user) {
            setUser(response.data.user)
            setExpiration(response.data.session.expires_at)
          }
        }
      )
    } catch (error) {
      console.log("Error with auth: " + error.error.message)
      // alert(error.error_description || error);
    }
  }

  async function handleSignOut() {
    try {
        // Send a message to the background script to initiate the sign out
        chrome.runtime.sendMessage({ action: "signout" }, (response) => {
            if (response.error) {
                toast({ description: `Error signing out: ${response.error}` });
                console.log("Error signing out: ", response.error);
            } else {
                // Clear the user and session data upon successful sign-out
                setUser(null);
                setExpiration(0);
            }
        });
    } catch (error) {
        console.log("Error signing out: ", error.message);
    }
}

  const refreshSession = () => {
    chrome.runtime.sendMessage(
      { action: "refreshsession" },
      (refreshResponse) => {
        if (refreshResponse.error) {
          console.log("Error refreshing session: " + refreshResponse.error)
        } else if (refreshResponse.data && refreshResponse.data.session) {
          console.log("Session refreshed successfully")
          setUser(refreshResponse.data.user)
        } else {
          console.log("Error: refreshed session data is not available")
        }
      }
    )
  }

These are the primary methods used to send the data from the popup.tsx to the BGSW in the background.ts file. The handleSignin() and the handleSignout() gets mapped to buttons in the return statement. These functions are all inside the react component.

Putting it all together in the return statement

return (
    <div className="w-96 px-5 py-4">
      <Toaster></Toaster>
      {user ? (
        // If user is logged in
        <div>
          <h1 className="text-xl font-bold mb-4">User Info</h1>
          <p>User ID: {user.id}</p>{" "}
          <Button onClick={handleSignOut}></Button>
        </div>
      ) : (
        <Form {...form}>
          <h1 className="text-xl font-bold mb-4">Basic Auth</h1>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input placeholder="username" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input placeholder="password" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit">Login</Button>
          </form>
        </Form>
      )}
    </div>
  )

There’s a checker that checks whether or not there’s a variable available for the user, if there’s no user the login-in form is shown otherwise the user gets into the app.

Use the Shadcn-UI forms link below as a reference for learning how to work with the react-hook-forms library.

https://ui.shadcn.com/docs/components/form

`Popup.tsx` Plasmo version

This version will not be leveraging message passing so the login/signup functionality will not operate the same way. Use the link below as a reference for the supabase auth sign-in functionality.

https://docs.plasmo.com/quickstarts/with-supabase

`useEffect()` for `supabasePlasmo`

useEffect(() => {
    async function init() {
      const { data, error } = await supabasePlasmo.auth.getSession()

      if (error) {
        console.error(error)
        return
      }
      if (!!data.session) {
        setUser(data.session.user)
      }
    }

    init()
  }, [])

Since there’s no messaging happening, the useEffect() is far more succinct for the supabasePlasmo version.

 // plasmo method
export default function LoginAuthFormPlasmo() {
  const [user, setUser] = useStorage<User>({
    key: "user",
    instance: new Storage({
      area: "local"
    })
  })

  const { toast } = useToast()
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      username: "",
      password: ""
    }
  })

  useEffect(() => {
    async function init() {
      const { data, error } = await supabasePlasmo.auth.getSession()

      if (error) {
        console.error(error)
        return
      }
      if (!!data.session) {
        setUser(data.session.user)
      }
    }

    init()
  }, [])

  const handleEmailLogin = async (type: "LOGIN" | "SIGNUP") => {
    const { username, password } = form.getValues()

    try {
      const { error, data } =
        type === "LOGIN"
          ? await supabasePlasmo.auth.signInWithPassword({
              email: username,
              password
            })
          : await supabasePlasmo.auth.signUp({
              email: username,
              password
            })

      if (error) {
        toast({
          description: `Error with auth: ${error.message}`
        })
      } else if (!data.user) {
        toast({
          description:
            "Signup successful, confirmation mail should be sent soon!"
        })
      } else {
        setUser(data.user)
      }
    } catch (error) {
      console.log("error", error)
      toast({
        description: error.error_description || error
      })
    }
  }

  return (
    <div className="w-96 px-5 py-4">
      <Toaster />
      {user ? (
        <>
          <h3>
            {user.email} - {user.id}
          </h3>
          <h1>this is plasmo </h1>
          <button
            onClick={() => {
              supabasePlasmo.auth.signOut()
              setUser(null)
            }}>
            Logout
          </button>
        </>
      ) : (
        <Form {...form}>
          <h1 className="text-xl font-bold mb-4">Login</h1>
          <form
            onSubmit={form.handleSubmit((data) => handleEmailLogin("LOGIN"))}
            className="space-y-8">
            <FormField
              control={form.control}
              name="username"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Email</FormLabel>
                  <FormControl>
                    <Input placeholder="Your Username" {...field} />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <FormField
              control={form.control}
              name="password"
              render={({ field }) => (
                <FormItem>
                  <FormLabel>Password</FormLabel>
                  <FormControl>
                    <Input
                      type="password"
                      placeholder="Your Password"
                      {...field}
                    />
                  </FormControl>
                  <FormMessage />
                </FormItem>
              )}
            />
            <Button type="submit">Login</Button>
            <Button onClick={() => handleEmailLogin("SIGNUP")}>Sign up</Button>
          </form>
        </Form>
      )}
    </div>
  )
}

Otherwise, it’s very similar to the supabaseAuto and supabaseManual however, the login, signin, and signout functions are a bit different since it’s modifying the supabase variable directly without leveraging messaging functionality.

Other Resources

Below is a good article on how doing oauth authentication in a MV3 chrome extension.

https://gourav.io/blog/supabase-auth-chrome-extension

Conclusion

There’s lots of ways for storing access tokens for auth, I covered three methods. All three methods will work for MV3, and this should be a reasonable template to build the rest of your chrome extension on, I hope this was helpful to anyone reading it. If you liked my work give me a follow on twitter. Check out the github repo below if you want to skip past the tutorial.

https://github.com/remusris/plasmo_tailwinds_supabase_scaffold

Programming Tidbits (VS Code Keyboard Shortcuts, Console.log Styling + Search, Diffing Libraries, fetch === curl)

remusris — Sun, 06 Aug 2023 21:42:54 +0000

Here are a few tidbits I've picked up coding to make your life easier in front of the keyboard.

Large Files

When working with a large file, there are times you need to step back and see the bigger picture. The VS Code keyboard shortcuts below will come in handy

Control + K + Control + J or Control + K + J — Unfold all functions (Command for Mac)

Control + K + Control + 0 or Control + K + 0 — Fold all functions (Command for Mac)

Control + K + Control + [ — Unfold current function (Command for Mac)

Control + K + Control + ] — Fold current function (Command for Mac)

Console.log Styling

Console.log commands don't all need to have the same coloring, in fact in-line CSS styling can be used to spruce up the console. This only works in the browser console though.

However, there are also other console.log libraries that can be used like Console, Logdown, Consola, or Ololog. Check out the links below for more information.

https://javascript.plainenglish.io/alternative-libraries-for-console-log-for-your-next-javascript-project-af6bc9a2f2ba

https://developer.chrome.com/docs/devtools/console/format-style/

https://blog.bitsrc.io/increase-readability-with-console-log-styling-with-chrome-devtools-a38a752d5096

Console.log Search not just Filter

You're also not relegated to using only "Filter" in the console which removes all other entries but instead, you can use control + F (Command for Mac) to search entries just like how it works on any other webpage.

Fetch === Curl

Curl commands are interchangeable with fetch commands in JS. If you want to have access to properly functioning curl commands on Windows, enable WSL and download Linux from the Windows Store to get access to the Linux terminal.

Copy Objects in Terminal

Objects can be copied from the console by right-clicking on the object and selecting "Copy Object"

Use Native Terminal in Large Projects

When working on a project with multiple codebases, i.e., chrome extension, edge-function, web app, and mobile app I find it’s best to use the external terminal app rather than the built-in VS Code one. You’ll quickly get frustrated trying to find the open VS Code project to check the terminal. Use the keyboard shortcut Control + J (Command for Mac) — open/close VS Code terminal to save yourself from the frustration of dragging with your mouse.

You can also download this VS Code extension to quickly maximize the VS Code terminal using the Control +(this is a backtick not a single quote) orControl + ;` (depending on the setting enabled) keyboard shortcut. https://marketplace.visualstudio.com/items?itemName=samueltscott.maximizeterminal

However, to quickly switch to the native terminal, open the VS Code terminal, enter pwd (this command will only work in the vs code terminal or Mac terminal not in the Windows terminal) to give you the path of the current file to then copy that over in your terminal app using cd <pathToPaste> and you’re ready to go.

Use Diffing Libraries

Use diffing libraries like microdiff to inspect differences between arrays and or objects, so you stop wasting time trying to do things like this yourself every time.

T3 Stack Template : Supabase (w/ Auth + DB) and Shadcn-UI Basic Setup

remusris — Mon, 24 Jul 2023 19:37:12 +0000

Update 10/18/2024

Just updated the latest repo to the app router. Check out the new branch at the link below

https://github.com/remusris/t3_supabase_scaffold/tree/app_router

Grabbing env keys is much easier now

Press the connect button

Click ORMs

Now you have the DIRECT URL and DATABASE URL strings ready to go

Click App Frameworks and you'll have the NextJS connection string ready to go.

Introduction

In this guide, we will cover how to convert the base T3 stack config to use Supabase auth instead of NextAuth.js coupled with Supabase DB and Shadcn-UI. We'll also cover how to use SQL triggers so that we can use the more stable single-schema db with Prisma and still get access to the Supabase client-side APIs.

Starting Out

npm create t3-app@latest

You can use pnpm or yarn instead of npm

T3 setup Flow

Create Project Name
Typescript (only typescript)
You can use nextAuth, prisma, tailwind and trpc, nextAuth is optional as we’re going to change that to supabase auth so whether you click yes on that option it doesn’t really matter since it’s going to be changed anyways.

Setting Up the `.env` & `.env.example` files

Go to the .env.example and copy the lines below, this will be a reference to modifying the .env file with all the environment variables

# PostgreSQL connection string with pgBouncer config — used by Prisma Client
DATABASE_URL = "insert_database_url_here"

# PostgreSQL connection string used for migrations
DIRECT_URL="insert_direct_url_here"

# Supabase
NEXT_PUBLIC_SUPABASE_URL="insert_supabase_public_url"
NEXT_PUBLIC_SUPABASE_ANON_KEY="insert_supabase_anon_key"

After creating a new project in Supabase, go to the project settings at the gear icon in the sidebar, then click on API.

Copy the Supabase URL in the NEXT_PUBLIC_SUPABASE_URL variable in the .env file

Copy anon key in the NEXT_PUBLIC_SUPABASE_ANON_KEY variable in .env file

Switch from the API to the Database Menu

Copy the Connection String URI in the DATABASE_URL variable in the .env file — should end with 5432

Copy the Connection Pooling - Connection String in the DIRECT_URL variable in .env file — should end with 6543

Add your password in the area below, REPLACING the brackets highlighted in green

NOT in the area below (inside the brackets)

Single-Schema DB + `auth.users` table trigger

The codebase below provided much of the inspiration for making this tutorial, however, it uses a multi-schema db which introduced some challenges when trying to access Supabase from the SupabaseJS client-side library.

https://github.com/supabase-community/create-t3-turbo

Due to there being some issues with multi-schema databases, I recommend using a single-schema database until those issues get resolved as it’s still a preview feature in Prisma as of when this article was published. Below is a GitHub thread discussing some real-world examples of the challenges of using the multi-schema db option in Prisma.

https://github.com/supabase/gotrue/issues/1061

Below is a thread from the Supabase discord channel where I posted the challenges I was having trying to modify the public schema.

Discord - A New Way to Chat with Friends & Communities

Below is the official guide from the Supabase docs on how to set up a Supabase project using a single schema db, however, it does not leverage the t3 stack. We’re going to be using the example SQL code for the auth.users trigger so the user_id variable can be accessed from the public.users table.

Build a User Management App with NextJS | Supabase Docs

SQL code reference

Below is the SQL users table trigger directly from the user management Supabase demo app.

-- Create a table for public profiles
create table profiles (
  id uuid references auth.users not null primary key,
  updated_at timestamp with time zone,
  username text unique,
  full_name text,
  avatar_url text,
  website text,

  constraint username_length check (char_length(username) >= 3)
);
-- Set up Row Level Security (RLS)
-- See <https://supabase.com/docs/guides/auth/row-level-security> for more details.
alter table profiles
  enable row level security;

create policy "Public profiles are viewable by everyone." on profiles
  for select using (true);

create policy "Users can insert their own profile." on profiles
  for insert with check (auth.uid() = id);

create policy "Users can update own profile." on profiles
  for update using (auth.uid() = id);

-- This trigger automatically creates a profile entry when a new user signs up via Supabase Auth.
-- See <https://supabase.com/docs/guides/auth/managing-user-data#using-triggers> for more details.
create function public.handle_new_user()
returns trigger as $$
begin
  insert into public.profiles (id, full_name, avatar_url)
  values (new.id, new.raw_user_meta_data->>'full_name', new.raw_user_meta_data->>'avatar_url');
  return new;
end;
$$ language plpgsql security definer;
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();

-- Set up Storage!
insert into storage.buckets (id, name)
  values ('avatars', 'avatars');

-- Set up access controls for storage.
-- See <https://supabase.com/docs/guides/storage#policy-examples> for more details.
create policy "Avatar images are publicly accessible." on storage.objects
  for select using (bucket_id = 'avatars');

create policy "Anyone can upload an avatar." on storage.objects
  for insert with check (bucket_id = 'avatars');

create policy "Anyone can update their own avatar." on storage.objects
  for update using (auth.uid() = owner) with check (bucket_id = 'avatars');

We’re not going to need most of what is used because we’re not using Supabase storage for this example but you're mileage may vary. Instead of profiles we’re going to call this table users.

-- Create a table for public users without a foreign key reference
CREATE TABLE users (
  user_id uuid NOT NULL PRIMARY KEY,
  updated_at timestamp with time zone
);

-- Set up Row Level Security (RLS)
ALTER TABLE users
ENABLE row level security;

-- Public users are viewable by everyone
CREATE POLICY "public_users_are_viewable_by_everyone" ON users
FOR SELECT USING (true);

-- Users can insert their own user
CREATE POLICY "users_can_insert_their_own_user" ON users
FOR INSERT WITH CHECK (auth.uid()::uuid = user_id);

-- Users can update their own user
CREATE POLICY "users_can_update_own_user" ON users
  FOR UPDATE USING (auth.uid()::uuid = user_id);

-- This trigger automatically creates a user entry when a new user signs up via Supabase Auth.
CREATE FUNCTION public.handle_new_user()
RETURNS trigger AS $$
BEGIN
  INSERT INTO public.users (user_id)
  VALUES (new.id);
  RETURN new;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

CREATE TRIGGER on_auth_user_created_v2
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE PROCEDURE public.handle_new_user();

Add the trigger in the SQL Editor

Set Up `signin.tsx` and `signup.tsx`

With the SQL code set up, we can go to the signin and signup pages next. Both the signin and signup functionality can be merged into one page but we’re just going to separate them out for clarity.

Download and Setup Shadcn-UI

Below is the page for getting started with Shadcn-UI, for a NextJS project.

https://ui.shadcn.com/docs/installation/next

pnpm dlx shadcn-ui@latest init

You can yarn or npm if your project needs other options.

Select the options above

Yes for src/ directory
No for the app router (this might change if t3 stack switches to the app router)
No

In a default T3-app configuration the globals.css is in the root → src → styles → globals.css

Shadcn UI Components

There’s also a manual installation available, but since the Shadcn CLI was set up, we can use the CLI instead to download all the additional dependencies.

https://ui.shadcn.com/docs/components/form

This is the link for setting up a form in Shadcn-UI.

pnpm dlx shadcn-ui@latest add form
pnpm dlx shadcn-ui@latest add toast
pnpm dlx shadcn-ui@latest add input
pnpm dlx shadcn-ui@latest add button
pnpm dlx shadcn-ui@latest add input
pnpm dlx shadcn-ui@latest add table

If the Shadcn CLI was set up correctly, this should add the UI components in the src → components → ui path.

Go to the path where each of the components was added, and double-check if there are any missing dependencies. In the toast.tsx file, there might be a missing dependency, it’ll be highlighted below.

Add the dependency manually.

pnpm add @radix-ui/react-toast

Import the following components into the signin.tsx file in the pages directory for Shadcn forms components, it uses react-hook-forms under the hood.

import * as z from "zod";
import { useForm, Resolver } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Button } from "../components/ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "../components/ui/form";
import { Input } from "../components/ui/input";
import { useToast } from "../components/ui/use-toast";
import { Toaster } from "../components/ui/toaster";

Adding the Supabase Components

Add in the Supabase components below.

pnpm add @supabase/auth-helpers-react

Putting it together

Set up the form schema below, and define the maximum or minimum inputs contingent on your project needs.

const formSchema = z.object({
  email: z.string().min(2).max(50),
  password: z.string().min(2),
});

Import the Supabase library component.

import { useSupabaseClient } from "@supabase/auth-helpers-react";

Create a React component that will be exported, the formSchema constant is outside of this function. Add in the Supabase library components and have it integrate with the react-forms-hook component.

function SignIn() {
  const supabase = useSupabaseClient();
  const router = useRouter();
  const { toast } = useToast();
  const [isSignUp, setIsSignUp] = useState(false);

  const signInWithPassword = async (email: string, password: string) => {
    const { error, data } = isSignUp
      ? await supabase.auth.signUp({
          email,
          password,
        })
      : await supabase.auth.signInWithPassword({
          email,
          password,
        });
    if (error) {
      toast({
        variant: "destructive",
        title: "Something went wrong",
        description: "Error with auth" + error.message,
      });
    } else if (isSignUp && data.user) {
      setIsSignUp(false);
    } else if (data.user) {
      router.push("/app/overview").catch((err) => {
        console.error("Failed to navigate", err);
      });
    }
  };

  const signOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) {
      console.error("Error signing out:", error.message);
    } else {
      toast({
        variant: "default",
        title: "Signed out successfully",
      });
      router.push("/signin").catch((err) => {
        console.error("Failed to navigate", err);
      });
    }
  };

  // 1. Define your form.
  const form = useForm<z.infer<typeof formSchema>>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email: "",
      password: "",
    },
  });

  // 2. Define a submit handler.
  function onSubmit(values: z.infer<typeof formSchema>) {
    // Do something with the form values.
    // ✅ This will be type-safe and validated.
    signInWithPassword(values.email, values.password).catch((err) => {
      console.error(err);
    });
  }

  return (
    <div className="flex min-h-screen items-center justify-center">
      <Toaster></Toaster>
      <div className="w-96">
        <div className="flex flex-col items-start">
          <Form {...form}>
            <h1 className="mb-4 text-3xl font-bold">T3 Demo Sign-In</h1>

            <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-8">
              <FormField
                control={form.control}
                name="email"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Email</FormLabel>
                    <FormControl>
                      <Input className="w-96" placeholder="email" {...field} />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormField
                control={form.control}
                name="password"
                render={({ field }) => (
                  <FormItem>
                    <FormLabel>Password</FormLabel>
                    <FormControl>
                      <Input
                        className="w-96"
                        placeholder="password"
                        {...field}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <div className="flex justify-end">
                <Button type="submit">Login</Button>
                <Button onClick={signOut}>Sign Out</Button>
                <Button onClick={() => setIsSignUp((s) => !s)}>
                  {isSignUp
                    ? "Already have an account?"
                    : "Don't have an account?"}
                </Button>
              </div>
            </form>
          </Form>
        </div>
      </div>
    </div>
  );
}

export default SignIn;

signup.tsx

The signup.tsx should be nearly the same, the only difference being the signInWithPassword gets replaced with signUpWithPassword and the onSubmit function uses signUpWithPassword instead of signInWithPassword

const signUpWithPassword = async (email: string, password: string) => {
    const { error, data } = await supabase.auth.signUp({
      email,
      password,
    });

    if (error) {
      toast({
        variant: "destructive",
        title: "Something went wrong",
        description: "Error with auth" + error.message,
      });
    } else if (data.user) {
      toast({
        variant: "default",
        title: "Check your email",
      });
      router.push("/signin").catch((err) => {
        console.error("Failed to navigate", err);
      });
    }
  };

function onSubmit(values: z.infer<typeof formSchema>) {
    signUpWithPassword(values.email, values.password).catch((err) => {
      console.error(err);
    });
  }

Modifying the T3 Scaffold

env.mjs

Below is the default env.mjs setup that is located in src → env.mjs directory

import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    NODE_ENV: z.enum(["development", "test", "production"]),
    NEXTAUTH_SECRET:
      process.env.NODE_ENV === "production"
        ? z.string().min(1)
        : z.string().min(1).optional(),
    NEXTAUTH_URL: z.preprocess(
      // This makes Vercel deployments not fail if you don't set NEXTAUTH_URL
      // Since NextAuth.js automatically uses the VERCEL_URL if present.
      (str) => process.env.VERCEL_URL ?? str,
      // VERCEL_URL doesn't include `https` so it cant be validated as a URL
      process.env.VERCEL ? z.string().min(1) : z.string().url()
    ),
    // Add `.min(1) on ID and SECRET if you want to make sure they're not empty
    DISCORD_CLIENT_ID: z.string(),
    DISCORD_CLIENT_SECRET: z.string(),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    // NEXT_PUBLIC_CLIENTVAR: z.string().min(1),
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXTAUTH_SECRET: process.env.NEXTAUTH_SECRET,
    NEXTAUTH_URL: process.env.NEXTAUTH_URL,
    DISCORD_CLIENT_ID: process.env.DISCORD_CLIENT_ID,
    DISCORD_CLIENT_SECRET: process.env.DISCORD_CLIENT_SECRET,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
   * This is especially useful for Docker builds.
   */
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
});

We’re going to remove all the NEXTAUTH and discord references as we’re not using discord authentication in this scaffold.

import { createEnv } from "@t3-oss/env-nextjs";
import { z } from "zod";

export const env = createEnv({
  /**
   * Specify your server-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars.
   */
  server: {
    DATABASE_URL: z.string().url(),
    NODE_ENV: z.enum(["development", "test", "production"]),
  },

  /**
   * Specify your client-side environment variables schema here. This way you can ensure the app
   * isn't built with invalid env vars. To expose them to the client, prefix them with
   * `NEXT_PUBLIC_`.
   */
  client: {
    NEXT_PUBLIC_SUPABASE_URL: z.string().min(1),
    NEXT_PUBLIC_ANON_KEY: z.string().min(1),
  },

  /**
   * You can't destruct `process.env` as a regular object in the Next.js edge runtimes (e.g.
   * middlewares) or client-side so we need to destruct manually.
   */
  runtimeEnv: {
    DATABASE_URL: process.env.DATABASE_URL,
    NODE_ENV: process.env.NODE_ENV,
    NEXT_PUBLIC_SUPABASE_URL: process.env.NEXT_PUBLIC_SUPABASE_URL,
    NEXT_PUBLIC_ANON_KEY: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  },
  /**
   * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
   * This is especially useful for Docker builds.
   */
  skipValidation: !!process.env.SKIP_ENV_VALIDATION,
});

This is what we’re left with after the appropriate modifications.

`src → pages → api → auth`

We can delete the auth folder under API since we’re using Supabase auth instead.

Modify the `trpc.ts` file in `src/server` path

Below is the default, base configuration in the src → server → api → trpc.ts path.

import { initTRPC, TRPCError } from "@trpc/server";
import { type CreateNextContextOptions } from "@trpc/server/adapters/next";
import { type Session } from "next-auth";
import superjson from "superjson";
import { ZodError } from "zod";
import { getServerAuthSession } from "~/server/auth";
import { prisma } from "~/server/db";

/**
 * 1. CONTEXT
 *
 * This section defines the "contexts" that are available in the backend API.
 *
 * These allow you to access things when processing a request, like the database, the session, etc.
 */

interface CreateContextOptions {
  session: Session | null;
}

/**
 * This helper generates the "internals" for a tRPC context. If you need to use it, you can export
 * it from here.
 *
 * Examples of things you may need it for:
 * - testing, so we don't have to mock Next.js' req/res
 * - tRPC's `createSSGHelpers`, where we don't have req/res
 *
 * @see <https://create.t3.gg/en/usage/trpc#-serverapitrpcts>
 */
const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
  };
};

/**
 * This is the actual context you will use in your router. It will be used to process every request
 * that goes through your tRPC endpoint.
 *
 * @see <https://trpc.io/docs/context>
 */
export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const { req, res } = opts;

  // Get the session from the server using the getServerSession wrapper function
  const session = await getServerAuthSession({ req, res });

  return createInnerTRPCContext({
    session,
  });
};

/**
 * 2. INITIALIZATION
 *
 * This is where the tRPC API is initialized, connecting the context and transformer. We also parse
 * ZodErrors so that you get typesafety on the frontend if your procedure fails due to validation
 * errors on the backend.
 */

const t = initTRPC.context<typeof createTRPCContext>().create({
  transformer: superjson,
  errorFormatter({ shape, error }) {
    return {
      ...shape,
      data: {
        ...shape.data,
        zodError:
          error.cause instanceof ZodError ? error.cause.flatten() : null,
      },
    };
  },
});

/**
 * 3. ROUTER & PROCEDURE (THE IMPORTANT BIT)
 *
 * These are the pieces you use to build your tRPC API. You should import these a lot in the
 * "/src/server/api/routers" directory.
 */

/**
 * This is how you create new routers and sub-routers in your tRPC API.
 *
 * @see <https://trpc.io/docs/router>
 */
export const createTRPCRouter = t.router;

/**
 * Public (unauthenticated) procedure
 *
 * This is the base piece you use to build new queries and mutations on your tRPC API. It does not
 * guarantee that a user querying is authorized, but you can still access user session data if they
 * are logged in.
 */
export const publicProcedure = t.procedure;

/** Reusable middleware that enforces users are logged in before running the procedure. */
const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

/**
 * Protected (authenticated) procedure
 *
 * If you want a query or mutation to ONLY be accessible to logged in users, use this. It verifies
 * the session is valid and guarantees `ctx.session.user` is not null.
 *
 * @see <https://trpc.io/docs/procedures>
 */
export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);

We’ll need to import some types and functions from the supabase/auth-helpers-nextjs library that should already be installed from the signin.tsx code.

import {
  createPagesServerClient,
  type User,
} from "@supabase/auth-helpers-nextjs";

Change the interface from Session that maps to Nextauth.js to User which comes from Supabase.

interface CreateContextOptions {
  session: User | null;
}

The innerTRPCContext also needs to be changed from session to user.

const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    session: opts.session,
    prisma,
  };
};

export const createInnerTRPCContext = (opts: CreateContextOptions) => {
  return {
    **user: opts.user,**
    prisma,
  };
};

Next, the createTRPCContext also needs to be changed to communicate with Supabase, nearly all the code is replaced.

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const { req, res } = opts;

  // Get the session from the server using the getServerSession wrapper function
  const session = await getServerAuthSession({ req, res });

  return createInnerTRPCContext({
    session,
  });
};

export const createTRPCContext = async (opts: CreateNextContextOptions) => {
  const supabase = createPagesServerClient(opts);

  // browsers will have the session cookie set
  const token = opts.req.headers.authorization;

  const user = token
    ? await supabase.auth.getUser(token)
    : await supabase.auth.getUser();

  return createInnerTRPCContext({
    user: user.data.user,
  });
};

The enforcedUserIsAuthed variable needs to be changed, below is the default to use the user properties instead

/** Reusable middleware that enforces users are logged in before running the procedure. */
const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.session?.user) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({
    ctx: {
      // infers the `session` as non-nullable
      session: { ...ctx.session, user: ctx.session.user },
    },
  });
});

const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  if (!ctx.user?.id) {
    throw new TRPCError({ code: "UNAUTHORIZED" });
  }
  return next({
    ctx: {
      // infers the `user` as non-nullable
      user: ctx.user,
    },
  });
});

3 Modify the `_app.tsx` file

Below is the base configuration.

import { type Session } from "next-auth";
import { SessionProvider } from "next-auth/react";
import { type AppType } from "next/app";
import { api } from "~/utils/api";
import "~/styles/globals.css";

const MyApp: AppType<{ session: Session | null }> = ({
  Component,
  pageProps: { session, ...pageProps },
}) => {
  return (
    <SessionProvider session={session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
};

export default api.withTRPC(MyApp);

We have to import the supabase/auth-helpers-react and supabase/auth-helpers-nextjs libraries.

import {
  createPagesBrowserClient,
  type Session,
} from "@supabase/auth-helpers-nextjs";
import { SessionContextProvider } from "@supabase/auth-helpers-react";

Change from AppType to AppProps and user the SessionContextProvider from the supabase/auth-helpers-nextjs library.

function MyApp({
  Component,
  pageProps,
}: **AppProps**<{ initialSession: Session | null }>) {
  const [supabaseClient] = useState(() => createPagesBrowserClient());

  return (
    <SessionContextProvider
      supabaseClient={supabaseClient}
      initialSession={pageProps.initialSession}
    >
      <Component {...pageProps} />
    </SessionContextProvider>
  );
}

Schema.Prisma File

For the schema.prisma file we’re going to be using a single-schema db, as was mentioned at the beginning of the article that there are some challenges with a multi-schema db as it’s still a preview feature in Prisma.

Below is the default configuration, we’re going to change the provider to postgresql from sqlite .

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

datasource db {
    provider = "sqlite"
    // NOTE: When using mysql or sqlserver, uncomment the @db.Text annotations in model Account below
    // Further reading:
    // <https://next-auth.js.org/adapters/prisma#create-the-prisma-schema>
    // <https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string>
    url      = env("DATABASE_URL")
}

We added three tables, only the users table is essential but the other two will be used as examples.

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

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

/// This model contains row level security and requires additional setup for migrations. Visit <https://pris.ly/d/row-level-security> for more info.
model users {
    user_id        String           @id @db.Uuid
    updated_at     DateTime?        @db.Timestamptz(6)
    privateExample privateExample[]
}

model example {
    id          String    @id @default(uuid()) @db.Uuid
    firstEntry  String?
    lastUpdated DateTime? @updatedAt @db.Timestamptz(6)
}

model privateExample {
    id          String    @id @default(uuid()) @db.Uuid
    user_id     String    @db.Uuid
    users       users     @relation(fields: [user_id], references: [user_id])
    firstEntry  String?
    lastUpdated DateTime? @updatedAt @db.Timestamptz(6)
}

The prisma.schema file above is for a single-schema db, all the tables above are in the “public” schema. The public.users table is mirroring the id property from the auth.users table, being copied over. The example table is like a public newsfeed and the privateExample is for private user content, hence the one-to-many relationship from the users table to the privateExample table.

`tester.tsx` page

On the tester.tsx page, we’re going to query the example and privateExample table and also add entries to it using an input area. This will show you to add data to a table both publicly and from an authenticated user.

Create New Route `src → server → api → routers → firstRouter.ts`

Import zod, createTRPCRouter, protectedProcedure and publicProcedure

import { z } from "zod";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";

Create Four Methods, `getAll`, `create`, `getAllPrivate`, `createPrivate`

The getAll is available publicly by any user, the create is for public upload, getAllPrivate is for all individual user contributions and createPrivate is for individual user upload.

export const firstRouter = createTRPCRouter({
  getAll: publicProcedure.query(({ ctx }) => {
    return ctx.prisma.example.findMany();
  }),

  create: publicProcedure
    .input(z.object({ firstEntry: z.string() }))
    .mutation(async ({ ctx, input }) => {
      return ctx.prisma.example.create({
        data: {
          firstEntry: input.firstEntry,
        },
      });
    }),

  getAllPrivate: protectedProcedure.query(({ ctx }) => {
    return ctx.prisma.privateExample.findMany({
      where: {
        user_id: ctx.user.id,
      },
    });
  }),

  createPrivate: protectedProcedure
    .input(z.object({ user_id: z.string(), firstEntry: z.string() }))
    .mutation(async ({ ctx, input }) => {
      return ctx.prisma.privateExample.create({
        data: {
          firstEntry: input.firstEntry,
          user_id: input.user_id,
        },
      });
    }),
});

Update `root.ts` in `src → server → api → routers`

First, import the new router in the root.ts file then add it in the export statement.

import { exampleRouter } from "~/server/api/routers/example";
import { createTRPCRouter } from "~/server/api/trpc";
import { firstRouter } from "./routers/firstRouter";

/**

This is the primary router for your server. *
All routers added in /api/routers should be manually added here. / export const appRouter = createTRPCRouter({ example: exampleRouter, **first: firstRouter,* });

// export type definition of API
export type AppRouter = typeof appRouter;

Client-Side Code `tester.tsx`

Import the Shadcn-UI components.

import { Input } from "../components/ui/input";
import {
  Table,
  TableCaption,
  TableHeader,
  TableRow,
  TableHead,
  TableCell,
  TableBody,
} from "../components/ui/table";
import { Button } from "../components/ui/button";

Import React library components.

import { api } from "../utils/api";
import { useState } from "react";
import { useSupabaseClient, useUser } from "@supabase/auth-helpers-react";
import { Input } from "../../components/ui/input";

Put it all together and you should get two columns, one for the public user data and the other for private user data.

export default function Content() {
  const { data } = api.example.getSecretMessage.useQuery();
  const { data: items, refetch: refetchItems } = api.first.getAll.useQuery();
  const { data: privateItems, refetch: refetchPrivateItems } =
    api.first.getAllPrivate.useQuery();

  const [inputValue, setInputValue] = useState("");
  const [inputPrivateValue, setInputPrivateValue] = useState("");

  const user = useUser();

  const createExample = api.first.create.useMutation({
    onSuccess: () => {
      setInputValue("");
      void refetchItems();
    },
  });

  const createPrivateExample = api.first.createPrivate.useMutation({
    onSuccess: () => {
      setInputPrivateValue("");
      void refetchPrivateItems();
    },
  });

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    createExample.mutate({ firstEntry: inputValue });
  };

  const handleChangePrivate = (e) => {
    setInputPrivateValue(e.target.value);
  };

  const handlePrivateSubmit = (e) => {
    e.preventDefault();
    if (!!user) {
      createPrivateExample.mutate({
        firstEntry: inputPrivateValue,
        user_id: user.id,
      });
    }
  };

const signOut = async () => {
    const { error } = await supabase.auth.signOut();
    if (error) {
      console.error("Error signing out:", error.message);
    } else {
      router.push("/signin").catch((err) => {
        console.error("Failed to navigate", err);
      });
    }
  };

  return (
    <div className="mx-auto max-w-7xl space-y-3">
      <div className="space-y-2">
        <h1 className="text-3xl"> Example </h1>
        <h1>user: {user?.id}</h1>
        <h1>{data}</h1>
        <Button onClick={signOut}>Sign Out</Button>
      </div>

      <div className="space-y-1">
        <h1 className="text-xl">Input Box</h1>
        <form onSubmit={handleSubmit} className="flex space-x-4">
          <Input
            type="text"
            value={inputValue}
            onChange={handleChange}
            placeholder="Enter a string"
            className="flex-grow"
          />
          <Button type="submit">Submit</Button>
        </form>

        <h1 className="text-xl">Private Input Box</h1>
        <form onSubmit={handlePrivateSubmit} className="flex space-x-4">
          <Input
            type="text"
            value={inputPrivateValue}
            onChange={handleChangePrivate}
            placeholder="Enter a private string"
            className="flex-grow"
          />
          <Button type="submit">Submit</Button>
        </form>
      </div>

      <div className="mt-8 grid grid-cols-2 gap-4">
        {items && (
          <Table>
            <TableCaption>Items:</TableCaption>
            <TableHeader>
              <TableRow>
                <TableHead>First Entry</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {items.map((item, index) => (
                <TableRow key={index}>
                  <TableCell>{item.firstEntry}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}

        {privateItems && (
          <Table>
            <TableCaption>Private Items:</TableCaption>
            <TableHeader>
              <TableRow>
                <TableHead>First Entry</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {privateItems.map((item, index) => (
                <TableRow key={index}>
                  <TableCell>{item.firstEntry}</TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </div>
    </div>
  );
}

You should get a screenshot that looks like this

Middleware Function

We’re also going to create a middleware function to protect routes in your web app. First, we’re going to create a new folder in the pages directory called protected located in src → pages → protected. From here we’re going to move the tester.tsx page to be nested inside this folder.

Using the code from this page below in the Supabase docs, we modify it for our needs.

https://supabase.com/docs/guides/auth/auth-helpers/nextjs-pages#auth-with-nextjs-middleware

Below is the reference middleware.ts code from Supabase.

import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export async function middleware(req: NextRequest) {
  // We need to create a response and hand it to the supabase client to be able to modify the response headers.
  const res = NextResponse.next()
  // Create authenticated Supabase Client.
  const supabase = createMiddlewareClient({ req, res })
  // Check if we have a session
  const {
    data: { session },
  } = await supabase.auth.getSession()

  // Check auth condition
  if (session?.user.email?.endsWith('@gmail.com')) {
    // Authentication successful, forward request to protected route.
    return res
  }

  // Auth condition not met, redirect to home page.
  const redirectUrl = req.nextUrl.clone()
  redirectUrl.pathname = '/'
  redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname)
  return NextResponse.redirect(redirectUrl)
}

export const config = {
  matcher: '/middleware-protected/:path*',
}

We’re going to change the matcher so that it protects everything in the protected directory leaving the “/” for a welcome or landing page accessible without authentication alongside the signin **page and **signup page. The middleware.ts file will get added to the src → middleware.ts directory. It’s imperative that the middleware function be named middleware.ts otherwise it won’t work.

export async function middleware(req: NextRequest) {
  // We need to create a response and hand it to the supabase client to be able to modify the response headers.
  const res = NextResponse.next();
  // Create authenticated Supabase Client.
  const supabase = createMiddlewareClient({ req, res });
  // Check if we have a session
  const {
    data: { session },
  } = await supabase.auth.getSession();

  // Check if user is on the signin page
  if (req.nextUrl.pathname === "/signin" || req.nextUrl.pathname === "/") {
    return res;
  }

  // Check auth condition
  if (session) {
    // Authentication successful, forward request to protected route.
    return res;
  }

  // Auth condition not met, redirect to home page.
  const redirectUrl = req.nextUrl.clone();
  redirectUrl.pathname = "/signin";
  redirectUrl.searchParams.set(`redirectedFrom`, req.nextUrl.pathname);
  return NextResponse.redirect(redirectUrl);
}

export const config = {
  matcher: "/protected/:path*",
};

Conclusion

If you followed the tutorial you should have a working t3 project using Supabase auth and db with Shadcn-UI all ready to go. If this article helped you out feel free to give me a follow on Twitter. If there are any errors in this article or any other questions, free free to comment below or reach out to me on Twitter, my DMs are open. Check out the GitHub link below to use the template if you get stuck or just want to get started. https://github.com/remusris/t3_supabase_demo

DEV Community: remusris

Open github url in gitingest via chrome extension and keyboard shortcut

Chrome Extension MV3 Template : Supabase Auth, Plasmo, Tailwinds CSS & Shadcn UI

Setting Up Plasmo, Tailwinds & Shadcn-UI

Setting Up Plasmo

Adding Tailwinds CSS Manually — Can be Skipped

Setting Up Shadcn-UI

How to use tailwinds in the popup.tsx file

Supabase Auth for MV3 Chrome Extension

Install SupabaseJS client

Introduction to Auth in a Chrome Extension

Access Token & Refresh Token Storage — Three Methods

Setting Up the Supabase Client

Why getItem, setItem and removeItem ?

Plasmo Storage API Method

Background Service Worker BGSW — Background.ts

Where to put background.ts?

Adding & Removing Access Tokens Manually

Message Handlers for supabaseAuto & supabaseManual

handleMessageManual() for supabaseManual

handleMessageAutomatic() for supabaseAuto

Creating Popup.tsx Components w/Messaging to BGSW

useEffect() for supabaseManual

useEffect() for supabaseAuto

handleSignin(), handleSignout() and refreshSession() Methods

Putting it all together in the return statement

Popup.tsx Plasmo version

useEffect() for supabasePlasmo

Other Resources

Conclusion

Programming Tidbits (VS Code Keyboard Shortcuts, Console.log Styling + Search, Diffing Libraries, fetch === curl)

Large Files

Console.log Styling

Console.log Search not just Filter

Fetch === Curl

Copy Objects in Terminal

Use Native Terminal in Large Projects

Use Diffing Libraries

T3 Stack Template : Supabase (w/ Auth + DB) and Shadcn-UI Basic Setup

Update 10/18/2024

Introduction

Starting Out

Setting Up the .env & .env.example files

Single-Schema DB + auth.users table trigger

SQL code reference

Add the trigger in the SQL Editor

Other SQL Trigger Articles

Set Up signin.tsx and signup.tsx

Download and Setup Shadcn-UI

Shadcn UI Components

Adding the Supabase Components

Putting it together

signup.tsx

Modifying the T3 Scaffold

src → pages → api → auth

Modify the trpc.ts file in src/server path

3 Modify the _app.tsx file

Schema.Prisma File

tester.tsx page

Create New Route src → server → api → routers → firstRouter.ts

Create Four Methods, getAll, create, getAllPrivate, createPrivate

Update root.ts in src → server → api → routers

Client-Side Code tester.tsx

Middleware Function

Conclusion

How to use tailwinds in the `popup.tsx` file

Why `getItem`, `setItem` and `removeItem` ?

Background Service Worker BGSW — `Background.ts`

Where to put `background.ts`?

Message Handlers for `supabaseAuto` & `supabaseManual`

`handleMessageManual()` for `supabaseManual`

`handleMessageAutomatic()` for `supabaseAuto`

Creating `Popup.tsx` Components w/Messaging to BGSW

`useEffect()` for `supabaseManual`

`useEffect()` for `supabaseAuto`

`handleSignin()`, `handleSignout()` and `refreshSession()` Methods

`Popup.tsx` Plasmo version

`useEffect()` for `supabasePlasmo`

Setting Up the `.env` & `.env.example` files

Single-Schema DB + `auth.users` table trigger

Set Up `signin.tsx` and `signup.tsx`

`src → pages → api → auth`

Modify the `trpc.ts` file in `src/server` path

3 Modify the `_app.tsx` file

`tester.tsx` page

Create New Route `src → server → api → routers → firstRouter.ts`

Create Four Methods, `getAll`, `create`, `getAllPrivate`, `createPrivate`

Update `root.ts` in `src → server → api → routers`

Client-Side Code `tester.tsx`