nextjs-firebase-auth v1.1.21

Uso

Primeiro, vamos importar o nosso pacote.

import * as NFA from 'nextjs-firebase-auth';

Agora vamos definir os tipos de usuários e o modelo do usuário.

interface User {
   id: string;
   name: string;
   email: string;
   phone: number;
   photoURL: string | null;
   createdAt: string;
}

type UserRole = 'user' | 'admin';

Feito isso podemos criar um contexto que irá retornar o nosso AuthProvider, passando para ele as propriedades necessárias.

interface ContextProps {
   children: React.ReactNode | JSX.Element;
}

if (!firebase.getApps().length) firebase.initializeApp(firebaseConfig);
const app = firebase.getApp();

export function AuthProvider(props: ContextProps) {
   return (
      // Estamos passando aqui os parâmetros de tipo
      <NFA.AuthProvider<UserRole, User>
         // Id único para cada projeto
         appId="unique-project-id"
         // Componente que será renderizado quando a autenticação estiver carregando
         loader={LoadingFullScreen}
         // Objeto com os tipos de usuários com os seus nomes personalizados
         roles={{
            user: 'Usuário',
            admin: 'Administrador',
         }}
         // Rotas que o fluxo de validação da autenticação será pulada
         disabledAuthRoutes={['/login']}
         // Rotas privadas da aplicação (Importante incluir todas)
         privateRoutes={['/dashboard*', '/panel*']}
         // Rotas públicas da aplicação (Importante incluir todas)
         publicRoutes={['/', '/login', '/register', '/forgot-password']}
         // Permissões para cada tipo de usuário
         permissions={{
            admin: {
               role: 'admin',
               mainRoute: '/dashboard',
               allowedRoutes: ['*'],
               restrictedRoutes: [],
            },
            user: {
               role: 'user',
               mainRoute: '/panel',
               allowedRoutes: ['/panel*'],
               restrictedRoutes: [],
            },
         }}
         // Firebase app
         firebaseApp={app}
      >
         {props.children}
      </NFA.AuthProvider>
   );
}

Agora só precisamos configurar e exportar o nosso hook useAuth passando para ele os nossos parâmetros de tipo.

export const useAuth = () => NFA.useNFA<UserRole, User>();

Pronto, o seu contexto de autenticação deve ter ficado mais ou menos assim.

import * as NFA from 'nextjs-firebase-auth';
import * as firebase from 'firebase/app';

import LoadingFullScreen from 'components/LoadingFullScreen';
import { firebaseConfig } from '../../firebaseConfig';

interface ContextProps {
   children: React.ReactNode | JSX.Element;
}

interface User {
   id: string;
   name: string;
   email: string;
   phone: number;
   photoURL: string | null;
   enterpriseId: string;
   createdAt: string;
}

type UserRole = 'user' | 'admin';

if (!firebase.getApps().length) firebase.initializeApp(firebaseConfig);
const app = firebase.getApp();

export function AuthProvider(props: ContextProps) {
   return (
      <NFA.AuthProvider<UserRole, User>
         appId="unique-project-id"
         loader={LoadingFullScreen}
         roles={{
            user: 'Usuário',
            admin: 'Administrador',
         }}
         disabledAuthRoutes={['/login']}
         permissions={{
            admin: {
               role: 'admin',
               mainRoute: '/dashboard',
               allowedRoutes: ['*'],
               restrictedRoutes: [],
            },
            user: {
               role: 'user',
               mainRoute: '/panel',
               allowedRoutes: ['/panel*'],
               restrictedRoutes: [],
            },
         }}
         privateRoutes={['/dashboard*', '/panel*']}
         publicRoutes={['/', '/login', '/register', '/forgot-password']}
         firebaseApp={app}
      >
         {props.children}
      </NFA.AuthProvider>
   );
}

export const useAuth = () => NFA.useNFA<UserRole, User>();