1.2.1 • Published 10 months ago

nextjs-firebase-auth v1.2.1

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

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>();
1.2.0

10 months ago

1.2.1

10 months ago

1.1.35

10 months ago

1.1.29

1 year ago

1.1.28

1 year ago

1.1.30

1 year ago

1.1.34

12 months ago

1.1.33

1 year ago

1.1.32

1 year ago

1.1.31

1 year ago

1.1.23

1 year ago

1.1.22

1 year ago

1.1.27

1 year ago

1.1.26

1 year ago

1.1.25

1 year ago

1.1.24

1 year ago

1.1.21

1 year ago

1.1.16

1 year ago

1.1.19

1 year ago

1.1.18

1 year ago

1.1.17

1 year ago

1.1.20

1 year ago

1.1.15

2 years ago

1.1.12

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

1.1.14

2 years ago

1.1.13

2 years ago

1.1.1

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.0.32

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago