Uso

Primeiro, vamos importar o nosso pacote.

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

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

1interface User {
2   id: string;
3   name: string;
4   email: string;
5   phone: number;
6   photoURL: string | null;
7   createdAt: string;
8}
9
10type UserRole = 'user' | 'admin';

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

1interface ContextProps {
2   children: React.ReactNode | JSX.Element;
3}
4
5if (!firebase.getApps().length) firebase.initializeApp(firebaseConfig);
6const app = firebase.getApp();
7
8export function AuthProvider(props: ContextProps) {
9   return (
10      // Estamos passando aqui os parâmetros de tipo
11      <NFA.AuthProvider<UserRole, User>
12         // Id único para cada projeto
13         appId="unique-project-id"
14         // Componente que será renderizado quando a autenticação estiver carregando
15         loader={LoadingFullScreen}
16         // Objeto com os tipos de usuários com os seus nomes personalizados
17         roles={{
18            user: 'Usuário',
19            admin: 'Administrador',
20         }}
21         // Rotas que o fluxo de validação da autenticação será pulada
22         disabledAuthRoutes={['/login']}
23         // Rotas privadas da aplicação (Importante incluir todas)
24         privateRoutes={['/dashboard*', '/panel*']}
25         // Rotas públicas da aplicação (Importante incluir todas)
26         publicRoutes={['/', '/login', '/register', '/forgot-password']}
27         // Permissões para cada tipo de usuário
28         permissions={{
29            admin: {
30               role: 'admin',
31               mainRoute: '/dashboard',
32               allowedRoutes: ['*'],
33               restrictedRoutes: [],
34            },
35            user: {
36               role: 'user',
37               mainRoute: '/panel',
38               allowedRoutes: ['/panel*'],
39               restrictedRoutes: [],
40            },
41         }}
42         // Firebase app
43         firebaseApp={app}
44      >
45         {props.children}
46      </NFA.AuthProvider>
47   );
48}

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

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

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

1import * as NFA from 'nextjs-firebase-auth';
2import * as firebase from 'firebase/app';
3
4import LoadingFullScreen from 'components/LoadingFullScreen';
5import { firebaseConfig } from '../../firebaseConfig';
6
7interface ContextProps {
8   children: React.ReactNode | JSX.Element;
9}
10
11interface User {
12   id: string;
13   name: string;
14   email: string;
15   phone: number;
16   photoURL: string | null;
17   enterpriseId: string;
18   createdAt: string;
19}
20
21type UserRole = 'user' | 'admin';
22
23if (!firebase.getApps().length) firebase.initializeApp(firebaseConfig);
24const app = firebase.getApp();
25
26export function AuthProvider(props: ContextProps) {
27   return (
28      <NFA.AuthProvider<UserRole, User>
29         appId="unique-project-id"
30         loader={LoadingFullScreen}
31         roles={{
32            user: 'Usuário',
33            admin: 'Administrador',
34         }}
35         disabledAuthRoutes={['/login']}
36         permissions={{
37            admin: {
38               role: 'admin',
39               mainRoute: '/dashboard',
40               allowedRoutes: ['*'],
41               restrictedRoutes: [],
42            },
43            user: {
44               role: 'user',
45               mainRoute: '/panel',
46               allowedRoutes: ['/panel*'],
47               restrictedRoutes: [],
48            },
49         }}
50         privateRoutes={['/dashboard*', '/panel*']}
51         publicRoutes={['/', '/login', '/register', '/forgot-password']}
52         firebaseApp={app}
53      >
54         {props.children}
55      </NFA.AuthProvider>
56   );
57}
58
59export const useAuth = () => NFA.useNFA<UserRole, User>();