#How to retrieve the id from the logged in user

9 messages · Page 1 of 1 (latest)

tribal gulch
#

I just started to working with Astro. I have a sidebar and the idea is to hide some items from the sidebar when the role is USER. I have the following code and this works with a static id. An atom isAdmin is set to true when the users role is ADMIN. This is used for conditional rendering the menu. How can i make this id dynamic. I tried several methods. In an astro file i can get the id from the Middleware. The id is fetched but i can not get this id to the roleStore.ts file. In roleStore.ts i tried to use Supabase getUser const { data: { user } } = await supabase.auth.getUser();
But sometimes i get the requested id but most of the times the value is undefined.
What is the best way to get a dynamic id from the logged in user? I hope someone can point me in the right direction

This is the code i use for update the const isAdmin to true or false

roleStore.ts

import { atom } from "nanostores";
import { supabase } from "@/lib/supabase";

const id = "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx";

export const isAdmin = atom(false);

async function updateAdminStatus() {
  const { data, error } = await supabase
    .from("profiles")
    .select("role")
    .eq("id", id)
    .single();

  if (error) {
    console.error("Error fetching user role:", error);
    isAdmin.set(false);
  } else {
    isAdmin.set(data.role === "ADMIN");
  }
}

updateAdminStatus();
rugged knot
#

I just read this and thought of two things. I apologize if I'm not understanding your problem and I've never used supabase

1). Are you using cookies? If you are you can store the user id in a cookie when the user logs in and get the id from the cookie whenever you need it.

  1. Can you use atoms in middleware? Never tried. But if you can then set the id to an atom and then subscribe to that atom in roleStore.ts
last crystal
tribal gulch
#

Both thanks for the suggestions. I have added this line to the middleware and added id to env.d.ts

locals.id = data.user?.id!;

Then i made a page test.astro with this code

---
const {id} = Astro.locals
---
<div>
   id: {id}
</div>

Then the id is show on the page test.astro
Now the last step is how can i pass the value from test.astro page to roleStore.ts. I must be overlooking something simple.

image.png
last crystal
#

Can you export a setId() function that you can then import and call?

tribal gulch
#

Did this in test.astro. Is this what you mean?
When i import setId in roleStore i get an error that id is not defined.
Tomorrow i will continue i quit for today

---
const { id } = Astro.locals;

export function setId() {
    return id;
}
---

<div>
  id: {id}
</div>

import { setId } from "@/pages/test.astro";
const id = setId();
last crystal
#

No, sorry, I meant the other way around. Declare an id var in roleStore and an exported setId() function to set it, then call it from test.astro passing in the id. It's not an elegant solution, but might work.

tribal gulch
#

The issue is finally solved, also worked on some MS issues😉 . roleStore is not changed but I imported isAdmin in index.ts (Middleware). Added locals.isAdmin to the protectedroute section. Then in an Astro file i call isAdmin for the first menu part and send it as a prop to a tsx file to use in the second part of the menu. The menu part is also rewritten and a lot shorter and less complex with the use of AlpineJS. I can also check if a user is not an admin and this route will then be redirected to /dashboard. The use of atom is not needed anymore. Thanks for the suggestions.