Auth0 getSession() com Typescript no Next.js

Obtendo as informações do usuário logado com Typescript.

Photo by Shahadat Rahman on Unsplash

Considerações

• Next.js com a App Router

Explicando o Problema

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();
  ...
}

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.

Aplicando a solução

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

    ...
  }

  ...

Conclusão

Nem sempre as soluções nativas nos fornecem todas as funcionalidades necessárias e por vezes necessitamos realizar adequações.

Aqui aconteceu exatamente isso, criei uma tipagem personalizada baseada na tipage do objeto user e dessa forma, posso acessar facilmente suas chaves.