DEV Community

Cover image for Auth0 getSession() com Typescript no Next.js
Marcelo Albuquerque
Marcelo Albuquerque

Posted on

Auth0 getSession() com Typescript no Next.js

Para obter as informações do usuário logado em server-side o Auth0 dispõe da função getSession().

A função getSession() não retorna diretamente o objeto contendo as informações do usuário, primeiramente é preciso acessar o objeto user dentro de getSession().

Em Typescript isso pode trazer alguns problemas, pois esse objeto não está devidamente tipado.

A documentação do Auth0 nos orienta a desestruturar o objeto user:

import { getSession } from '@auth0/nextjs-auth0';

export default async function ProfileClient() {
  // Typescript Error: Property 'user' does not exist on type 'Session | null | undefined'.
  const { user } = await getSession();

  ...
}
Enter fullscreen mode Exit fullscreen mode

Observe que a melhor forma, realmente seria a de desestruturar o objeto, em JavaScript nenhum erro será retornado, porém, em TypeScript o erro é claro.

Adotei a seguinte abordagem: Criei uma tipagem customizada idêntica a utilizada ao obter as informações do usuário em client-side. No lado do cliente podemos utilizar a função useUser() e desestruturar o objeto user, aqui a tipagem funciona perfeitamente, portanto, apenas copiei a tipagem correta.

import { getSession } from '@auth0/nextjs-auth0';

// Tipagem customizada idêntica a função `useUser()` do client-side
type userSessionProfileTypes = {
  email: string;
  name: string;
  nickname: string;
  picture: string;
  sub: string;
  updated_at: string;
  org_id: string;
}

export default async function ProfileClient() {
  const userSession = await getSession()

  if ( userSession !== undefined && userSession !== null ) {
    // Aqui podemos utilizar a tipagem customizada
    const user = userSession.user as userSessionProfileTypes

    ...
  }

  ...
Enter fullscreen mode Exit fullscreen mode

Dessa forma podemos utilizar o objeto user e acessar facilmente suas chaves.

Top comments (0)