Typescript: Session Types

[cdt-eth]

Hey!

I'm refactoring an app to Typescript and I'm fairly new to TS and unsure how to handle these 2 errors. Any help or clarification would be appreciated!

const [session, setSession] = useState(null);
const user = supabase.auth.user();

useEffect(() => {
  setSession(supabase.auth.session()); 

  supabase.auth.onAuthStateChange((_event, session) => {
    setSession(session);
  });
}, []);

1. "Argument of type 'Session | null' is not assignable to parameter of type 'SetStateAction'."
   setSession(supabase.auth.session());

2. "Argument of type 'Session | null' is not assignable to parameter of type 'SetStateAction'.ts"
   setSession(session);

[borngraced]

I'd suggest you first console.log the data returned from session and then proceed by creating a type/interface for it.

after doing so, use it like this const [session, setSession] = useState<NewlyCreatedTypeName | null>(null);

Let me if that works. thanks

[cdt-eth]

Hey! So I console.log'd the data and its an object, but I tried assigning session, Session, user, and supabase to object, in different combinations, but it always gave an error.

Once I deleted them all, and had an empty interface, it worked, but I don't understand why. I'm not sure why it works when empty and what it should be filled in with.

This is all I did and it compiled successfully:

interface INav {}

const Nav = (): ReactElement => {
  const [session, setSession] = useState<INav | null>(null);
  . 
  .
  .
}

[jonohewitt]

You could use the Session type provided with supabase:

import { Session } from "@supabase/gotrue-js/src/lib/types"

...

const [session, setSession] = useState<Session>()

To find this you can hover in VS Code, e.g:

Then you can just start typing the name in and it can be auto-imported, e.g:

You can inspect the type definition with Right click > Go to Type Definition

// GoTrueClient.ts

Then Right click > Go to Type Definition again on the Session interface

//types.ts

[cdt-eth]

thanks! that helped for that file.

How would I find the types for the Account component? It's taken directly from Supabase's React boilerplate. I found the types.ts file but see nothing for username, website, and avatar_url

[jonohewitt]

Those just look like basic strings so they don't need a custom type definition. You can use the built-in string type, or let typescript infer it automatically by assigning a string as the default value.

Maybe I'm missing something but that's probably what I would have done by using empty quotes instead of null as the default, e.g instead of

const [username, setUsername] = useState(null) 

// username has the 'any' type

...

value={username || ""}

I would write

const [username, setUsername] = useState("") 

// username is automatically given the 'string' type

...

value={username}

But you could also keep the original code and explicitly specify the string type

const [username, setUsername] = useState<string>(null) 

// username is explicitly typed as 'string'

...

value={username || ""}

[BenGardiner123]

I just wanted to say a big thank you to @jonohewitt and to people like you that show patience and give answers like this.
Thank you man.

[jonohewitt]

Hey @BenGardiner123 sorry for the slow reply but thanks a lot for the comment! Really appreciate it and glad my posts could help out.

[cdt-eth]

Thanks, that makes a lot of sense. Feels silly to have asked now, that one was easy.

I have a final question, if you don't mind.

in Auth.tsx I have this code and and it passes session as a prop:

in Account.tsx I receive the session, but it says Binding element 'session' implicitly has an 'any', how do I type this? For user below it says Object is possibly 'null':

[jonohewitt]

No worries!

For functions you can either assign types inline, usually if you only have a small number of props and you won't be reusing the definition elsewhere, or create a custom definition. So you could do:

    const Account = ({ session }: { session: Session }) => {}

or

    interface Account {
      session: Session
    }

    const Account = ({ session }: Account) => {}

There's also another form using type instead of interface

    type Account = {
      session: Session
    }

    const Account = ({ session }: Account) => {}

Type aliases are slightly different from interfaces and although it would also work fine here, it's recommended to stick to interface unless you need the extra functionality.

If you haven't seen it yet, it's definitely worth checking out the Typescript Handbook

[cdt-eth]

Okay great, that makes sense. and when it says "Object is possibly 'null'" i'd add a ? to the property correct?

const updates = {
        id: user?.id,
        .
        .
}

let { data, error, status } = await supabase
        .from("profiles")
        .select(`username, website, avatar_url`)
        .eq("id", user?.id)
        .single();

[jonohewitt]

The question mark there is called optional chaining which is just normal javascript - basically it prevents a breaking crash error if the object isn't found and returns undefined instead - which probably isn't what you want to do there.

I would make sure that the user id exists before making that fetch, maybe wrapping it in an if statement or putting it in a function and only calling it somewhere you've confirmed the user id exists.

[datalifenyc]

Thanks, that makes a lot of sense. Feels silly to have asked now, that one was easy.

I have a final question, if you don't mind.

in Auth.tsx I have this code and and it passes session as a prop:

in Account.tsx I receive the session, but it says Binding element 'session' implicitly has an 'any', how do I type this? For user below it says Object is possibly 'null':

This pointed me in the right direction.

authStore.js
[Note: User can be replaced with Session]

import { writable } from 'svelte/store';
import { User } from "@supabase/gotrue-js/src/lib/types"

export const user = writable(User())

__layout.svelte

<script>
    import { supabase } from "../supabase.js";
    import { user } from "../stores/authStore.js";

    user.set(supabase.auth.user());
</script>

[clodal]

In the latest version as of Jan 2025, the import path is now at

import { User } from '@supabase/auth-js/src/lib/types'