Exploring the dynamic duo of NextJS 14 with SupabaseAuth and the power of SupabasePostgres

As a recent graduate of a Full Stack Bootcamp, I am diving into NextJS and exploring Supabase for authentication. I may have some beginner questions, so bear with me.

Currently, I am utilizing a NextJS TypeScript template and incorporating Supabase for authentication:

  1. I'm interested in storing signup form data (specifically user role, callsign, firstname, and lastname) directly in the database's users table using Supabase, rather than in the session or raw_user_meta_data. Is it feasible to achieve this through Supabase? I've already added two new columns to the auth.users table via the SQL editor in my Supabase account. The goal is for the user's information to be saved in the auth.user table upon initial signup.

Here's a snippet of code for reference:

sign-up-form.tsx

 import ....

const schema = zod.object({
  // Code omitted for brevity
});

// More code not included here

return(
Form....
......

signUp function (GoTrueClients.ts)

// Code snippet not shown here

middleware.tsx:

// Code excerpt excluded

2. Post login, I aim to retrieve the user's role from the auth.users table in the database to dynamically render different dashboards based on the fetched user role.

Per the Supabase documentation (), one can fetch data like so:

// Code example provided but certain modules and functions seem to be missing

Apologies for the novice inquiries. Any pointers or recommendations for additional resources or GitHub repositories would be greatly appreciated!

What am I overlooking?

Answer №1

Is it possible to directly store the signup form data, such as user role and callsign, in the database using Supabase instead of storing it in the session or raw_user_meta_data?

One method could be to have a separate form for the user's data after they log in, like first_name ..., and then store this information in a separate profiles table where the user_id serves as a foreign key. An example of how to implement this can be found here:

  1. After logging in, I would like to retrieve the user role from the database in auth.users and conditionally display multiple dashboards based on the fetched user role.

You can achieve this by querying the user_role from the profiles table like so

const {data, error} = await supabase.from("profiles").select("user_role")

Subsequently, you can customize your conditional rendering accordingly.

NOTE: To ensure the above query functions correctly, remember to update your Row level policy (RLS) for the table; otherwise, you may receive empty data.

I hope this information proves helpful!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Access an Angular 2 component through an email hyperlink including querystring parameters

I need to create a deep link with query string parameters for a component, so that when the link is clicked, it opens up the component in the browser. For example: exmaple.com/MyComponent?Id=10 I want to include a link in an email that will open the com ...

Angular 2+: The art of creating an instance of a class using data retrieved from the backend

Within my Angular app, I have a Customer class and an ICustomer interface. interface ICustomer { <-- obtained from backend id: number; name: string; address: string; // additional properties } class Customer { <-- widely used in th ...

getStaticProps will not return any data

I'm experiencing an issue with my getStaticProps where only one of the two db queries is returning correct data while the other returns null. What could be causing this problem? const Dash = (props) => { const config = props.config; useEffect(() ...

"An error in the signature index results in the failure of the

I'm encountering a coding issue that's puzzling me. The TypeScript index signature I included in my code is as follows: const ships: { [index: string]: Ship } = {}; This snippet of code contains the problematic line: recieveAttack(e: any) { ...

Leverage TypeScript's enum feature by incorporating methods within each enum

In my TypeScript file, I have defined various events and interfaces: export type TSumanToString = () => string; export interface ISumanEvent { explanation: string, toString: TSumanToString } export interface ISumanEvents{ [key: string]: ...

I'm experiencing issues with my TypeScript compiler within my Next.js v14 project

I am working on a project using next.js version 14 and typescript v5. After installing these dependencies, I have noticed that the typescript compiler is not detecting errors related to types as expected. For example, when defining props for a component ...

Adding markers to a map in Angular 2 using ngOnInit after initialization

Embarking on my Angular journey by creating a sample app incorporating GoogleMaps. import { Component, Input, OnInit, Inject } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { FormControl } from '@ ...

Environment variables specific to the server side within NextJS

I am facing an issue with my .env.local file where I have a key stored as follows: NEXT__API__KEY=abcd When I try to access this key in the components and display it using console.log(process.env.NEXT__API__KEY); in my terminal, it shows 'abcd' ...

When the "works" localStorage error occurs, the dark mode theme is not being saved

Upon removing the if statement that checks if it's running on the browser, the dark/light mode theme successfully saves whenever the page is reloaded. However, an error occurs stating that localStorage is not defined. When the if statement is included ...

Using NgModel with a custom element

I am currently using a basic component within my form as shown below: <app-slider [min]="field.min" [max]="field.max" [value]="field.min"></app-slider> This component consists of the following code: HTML: <input #mySlider class="s ...

Encountering an issue with Next-Auth and LinkedIn, I am faced with the error message: [next-auth][error][OAUTH_CALLBACK_ERROR] - It is necessary to configure the jwks_uri on

I am currently facing an issue while trying to integrate Next-Auth with LinkedIn. The error message I am encountering is as follows: [next-auth][error][OAUTH_CALLBACK_ERROR] https://next-auth.js.org/errors#oauth_callback_error jwks_uri must be configured ...

Is it possible for the getStaticProps() function to function in Next JS even if I am solely rendering static JSX elements without any props or dynamic data?

The documentation for Next.js explains that the getStaticProps function is designed to pre-render dynamic code and serve full HTML content to clients and bots. getStaticProps uses a {params} parameter and returns props that are utilized by JSX elements. B ...

Exploring the potential of utilizing Next.js with Rails ActionCable

Incorporating a notification feature into my project using Nextjs and Rails Actioncable is my current task. Due to Nextjs utilizing SSR, I am required to employ dynamic imports (https://nextjs.org/docs/advanced-features/dynamic-import) to import @rails/act ...

Using the length of an array as an iterator within a nested ngFor loop in Angular 9

I am looping through an array of objects where each object contains another array of objects with attributes like "name" and "id". The length of this array of objects (noticias) varies. I am struggling to display these values and have only managed to acce ...

We regret to inform you that the Serverless Function in NextJs has surpassed the maximum size limit of 50mb

Recently, I've started working with NextJs and encountered an issue while attempting to deploy my project on Vercel. The error message that popped up looked like this: Error! The Serverless Function "api/auth" exceeds the maximum size limit of 50mb, ...

Make sure to refresh the state of the store whenever there is a change detected in the input

I am experiencing an input delay problem when trying to update the state of a zustand variable in the onChange event. const BuildOrder = (props: { setOpen: Function }) => { const { almacenes, isLoadingAlmacenes } = useGetAlmacenes(); const { article ...

A guide to adding a delay in the RxJS retry function

I am currently implementing the retry function with a delay in my code. My expectation is that the function will be called after a 1000ms delay, but for some reason it's not happening. Can anyone help me identify the error here? When I check the conso ...

Using Vuetify to filter items in a v-data-table upon clicking a button

My table structure is similar to this, https://i.sstatic.net/56TUi.png I am looking to implement a functionality where clicking on the Filter Button will filter out all items that are both male and valid with a value of true. users = [ { name: &apos ...

Typescript selection missing in Intellij IDEA when creating new Step definition File for Protractor and Cucumber

Currently working on: Protractor Cucumber and Typescript project Preferred IDE: Intellij IDEA Ultimate edition Any suggestions on what I might be overlooking? List of added plugins: 1. Javascript Support 2. Node.js ...

There seems to be a bug in the reducer within the store (using react, redux toolkit, and TypeScript)

Utilizing redux with typescript, I aim to create a reducer that will modify the state of the store, and my defined types are as follows: interface IArticle { id: number, title: string, body: string, } type ArticleState = { articles: IArticle[] } ...