next password protect

Senha Proteja suas implantações seguintes.js. View Demo (senha é secreta )

---

Exemplo-with-custom-logo.mov

Como funciona

Esta biblioteca adiciona um prompt de senha ao seu próximo.js implantação. Consiste em duas partes principais:

1. Duas rotas de API sem servidor:
   • Uma rota de login que verifica se uma senha está correta e define um cookie com um JWT, caso seja.
   • Uma rota de verificação que valida se você tiver o cookie de autorização com um JWT válido.
2. Um hoc (componente de ordem superior) que envolve o aplicativo Next.js e adiciona uma verificação que valida se você estiver conectado. Se o fizer, poderá visualizar o aplicativo normalmente; Caso contrário, você recebe um prompt de senha.

IMPORTANTE : O caso de uso recomendado para esta biblioteca está em um ambiente de preparação ou visualização. Ao aproveitar DefinePlugin do Webpack, podemos garantir que essa biblioteca esteja incluída apenas em determinados ambientes, mantendo o tamanho do pacote de produção pequeno.

Esta biblioteca não se destina a um invólucro de autenticação de senha segura, mas como uma maneira de manter as pessoas intrometidas.

Instalação

yarn add next-password-protect
# or
npm install next-password-protect

Uso

Existem 3 etapas para ativar a proteção de senha: definir uma variável global, adicionar as rotas da API e adicionar o hoc a _app.

Etapa 1

Para poder aproveitar a eliminação do código morto, recomenda -se adicionar uma variável de ambiente como process.env.PASSWORD_PROTECT e ativar a biblioteca com base nessa variável. Para definir essa variável, adicione o seguinte ao next.config.js :

 module . exports = {
  env : {
    // Add any logic you want here, returning `true` to enable password protect.
    PASSWORD_PROTECT : process . env . ENVIRONMENT === 'staging' ,
  }
} ) ;

Etapa 2

Adicione duas rotas de API, uma com o loginHandler e outro com a função API passwordCheckHandler . Você pode nomeá -los qualquer coisa, desde que passe os nomes para loginApiUrl e checkApiUrl , respectivamente, na próxima etapa. Por padrão, espera /login e /passwordCheck .

 import { loginHandler } from "next-password-protect" ;

export default loginHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ; 

 import { passwordCheckHandler } from "next-password-protect" ;

export default passwordCheckHandler ( "YOUR_SECRET_PASSWORD" , {
  // Options go here (optional)
  cookieName : "next-password-protect" ,
} ) ;

Etapa 3

Adicione o hoc withPasswordProtect à exportação padrão do App nas pages/_app.tsx :

 import { withPasswordProtect } from "next-password-protect" ;

// Before: export default App;
export default process . env . PASSWORD_PROTECT
  ? withPasswordProtect ( App , {
    // Options go here (optional)
    loginApiUrl : "/login" ,
  } )
  : App ;

NOTA : Certifique -se de especificar loginApiUrl e/ou checkApiUrl se as rota (s) da API não forem padrão.

API

Os manipuladores de rotas de API

loginHandler(password: string, options)

O objeto Opções pode conter qualquer uma das seguintes opções:

Opção	Descrição	Valor padrão
cookieMaxAge	Atributo de biscoito Max-Age	undefined
cookieName	O nome do cookie de autorização	'next-password-protect'
cookieSameSite	Atributo samesite cookie	false
cookieSecure	Bandeira segura no cookie	process.env.NODE_ENV === 'production'

passwordCheckHandler(password: string, options)

O objeto Opções pode conter qualquer uma das seguintes opções:

Opção	Descrição	Valor padrão
cookieName	O nome do cookie de autorização	'next-password-protect'

Próximo aplicativo hoc

withPasswordProtect(App: NextApp, options)

O objeto Opções pode conter qualquer uma das seguintes opções:

Opção	Descrição	Valor padrão
checkApiUrl	Caminho relativo da rota da API manuseada por passwordCheckHandler	'/api/passwordCheck'
loginApiUrl	Caminho relativo da rota da API tratada por loginHandler	'/api/login'
loginComponent	Forneça seu próprio componente de reação para mostrar como prompt de login	LoginComponent
loginComponentProps	Objeto de propriedades para personalizar o prompt de login, sem substituir todo o componente (veja abaixo)	{}
bypassProtection	Bypass Protection para rotas específicas, decidido por retorno de chamada com NextRouter Param	({ route }) => false

O objeto loginComponentProps pode conter qualquer uma das seguintes opções:

Opção	Descrição	Valor padrão
backUrl	Mostre um link com este URL para voltar ao site principal	undefined
buttonBackgroundColor	Botão de login cor de fundo	'#01EDBC'
buttonColor	Login Button Color	'#111'
logo	Mostre um logotipo acima do prompt (img src)	undefined

Avançado

Componente de login personalizado

Para alterar o componente de login padrão, um componente React pode ser fornecido ao hoc withPasswordProtect . Para que a biblioteca funcione corretamente, verifique se o componente de login possui entrada de senha que é validada pela rota da API. Você pode usar src/hoc/LoginComponent.tsx como ponto de partida.

Advertências

O AMP ainda não foi suportado, porque o Logincomponent falhou a validação do AMP. Em uma página do amplificador, nada é renderizado. Isso pode ser corrigido alterando o Logincomponent para AMP válido.