nextjs-firebase-auth
v1.2.1
Published
Firebase Auth handler for Next.js applications. Provides a context provider and a collection of utilities and helpers to handler with auth.
Downloads
261
Readme
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>();