A autenticação React é fácil com o Auth0

Existem muitas ferramentas excelentes para a criação de aplicativos modernos que podem facilitar nossa vida, mas um aspecto que costuma ser complicado e demorado é a autenticação. O cenário em torno da criação de aplicativos hoje é diferente do que costumava ser, o que pode dificultar o uso eficaz dos métodos tradicionais de autenticação. Além disso, há um desejo cada vez maior por recursos de autenticação que são mais recentes em sua concepção, como autenticação multifatorial, logon único e login sem senha. Vamos dar uma olhada mais de perto em alguns desses recursos.

Antes da popularização dos aplicativos de página única, a autenticação para o típico aplicativo de ida e volta não era tão complicada: bastava verificar as credenciais do usuário no banco de dados, salvar uma sessão no servidor e retornar um cookie para o usuário. No entanto, esse método tradicional de autenticação não é adequado para aplicativos de página única que dependem de APIs de dados porque exige que a API tenha estado, o que pode ter efeitos adversos. Em vez disso, o uso de métodos de autenticação sem estado, como o Tokens da Web JSON é preferível, mas tem o custo da necessidade de manter várias partes do aplicativo de página única sincronizadas com alguma indicação de que o usuário está autenticado. Normalmente, isso é feito verificando se o JWT do usuário é válido e, em seguida, mostrando condicionalmente os elementos e restringindo as rotas com base nesse resultado.

As pessoas querem poder se autenticar com suas credenciais existentes de provedores sociais como Google, Twitter, Facebook e similares. Essa opção é excelente para os usuários, pois significa que eles não precisam se lembrar de mais um conjunto de credenciais, e as empresas adoram essa opção, pois ela lhes oferece uma maneira de saber mais sobre seus clientes. A desvantagem, no entanto, é que pode ser difícil e demorado implementar a autenticação para cada um dos provedores de identidade social que podem ser solicitados pela base de usuários do aplicativo. Existem projetos de código aberto como o PassportJS que podem facilitar as coisas para o desenvolvedor, mas, mesmo com uma biblioteca, isso ainda pode ser uma tarefa complicada que exige um pouco de manutenção.

Segurança extra

Tanto as empresas quanto os usuários estão exigindo cada vez mais segurança reforçada nos aplicativos, e medidas extras como autenticação multifator pode ser muito eficaz. O problema é que esse recurso não é trivial. Pode ser difícil de implementar e propenso a erros ao codificá-lo manualmente, e certamente é algo que precisa ser feito corretamente.

Auth0 elimina toda a complexidade da autenticação e facilita a identidade para os desenvolvedores. Com o Auth0, o senhor pode adicionar autenticação a qualquer aplicativo em menos de 10 minutos e implementar recursos como login social, autenticação de múltiplos fatores e logon único com o simples toque de um botão. É realmente a maneira mais fácil de adicionar autenticação ao seu aplicativo!

Com o Auth0, o senhor obtém um camada gratuita pronta para produção que lhe dá 7.000 usuários ativos regulares sem nenhum custo. Um usuário ativo regular é aquele que fez login em algum momento nos últimos 30 dias, o que representa apenas cerca de 15% da base de usuários de muitas empresas.

conta Auth0. Depois de se registrar, vá para sua conta área de gerenciamento e confira o Aplicativo padrão que é criado para o senhor na seção Aplicativos link. É aqui que o senhor pode encontrar alguns dos detalhes necessários para que o Auth0 funcione no seu aplicativo, inclusive o domínio, o ID do cliente e a chave secreta.

O senhor também precisará inserir uma origem permitida ao testar seu aplicativo. Para fazer isso, basta digitar http://localhost:<your-port> no campo Origens permitidas nas configurações do seu aplicativo.

Enquanto estiver na área de gerenciamento, crie um novo usuário na seção Usuários para que o senhor tenha algumas credenciais para fazer login mais tarde.

Bloqueio é o widget de caixa de login fornecido pela Auth0 que permite que o senhor tenha uma tela de autenticação com todos os recursos, bastando inserir uma tag de script. O senhor pode obter o Lock no CDN da Auth0 e adicioná-lo ao seu index.html .

  <!-- index.html -->

  <!-- Auth0Lock script -->
  <script src="https://cdn.auth0.com/js/lock-9.0.min.js"></script>

  <!-- Setting the right viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

O melhor lugar para configurar o Lock é no componentWillMount no gancho do ciclo de vida. Adicione uma instância do Lock a uma raiz App e passe os detalhes do Auth0.

// App.jsx

var App = React.createClass({
  // ...
  componentWillMount: function() {
      this.lock = new Auth0Lock('YOUR_CLIENT_ID', 'YOUR_CLIENT_DOMAIN');
  },
  render: function() {
    return (<Home lock={this.lock} />);
  }
});

O lock foi passada para um componente chamado Home. Para abrir o widget Lock em um clique de botão, crie um novo método chamado showLock que chama o lock.show().

// Home.jsx

var Home = React.createClass({
  // ...
  showLock: function() {
    // Show the Auth0Lock widget
    this.props.lock.show();
  },

  render: function() {
    return (
    <div className="login-box">
      <a onClick={this.showLock}>Sign In</a>
    </div>);
  }
});

Agora, quando o usuário clicar no botão Entrar eles verão o botão Bloqueio e poderão inserir suas credenciais.

Se o usuário for autenticado com sucesso, ele será redirecionado de volta ao aplicativo com seu JWT (denominado id_token) como um hash. Esse JWT é assinado com a chave secreta definida nas configurações do aplicativo e agora pode ser usado para obter acesso a recursos protegidos em seu servidor. Mas, primeiro, ele precisa ser definido no armazenamento local.

Para usar o JWT posteriormente, ele precisa ser salvo e acessado de alguma forma. Para isso, é necessário um método que verifique o hash do URL em busca de um token e o salve, se houver um.

// App.jsx

var App = React.createClass({
  componentWillMount: function() {
    ...
    // Set the state with a property that has the token
    this.setState({idToken: this.getIdToken()})
  },
  createLock: function() {
    this.lock = new Auth0Lock(this.props.clientId, this.props.domain);
  },
  getIdToken: function() {
    // First, check if there is already a JWT in local storage
    var idToken = localStorage.getItem('id_token');
    var authHash = this.lock.parseHash(window.location.hash);
    // If there is no JWT in local storage and there is one in the URL hash,
    // save it in local storage
    if (!idToken && authHash) {
      if (authHash.id_token) {
        idToken = authHash.id_token
        localStorage.setItem('id_token', authHash.id_token);
      }
      if (authHash.error) {
        // Handle any error conditions
        console.log("Error signing in", authHash);
      }
    }
    return idToken;
  },
  render: function() {
    if (this.state.idToken) {
      return (<LoggedIn lock={this.lock} idToken={this.state.idToken} />);
    } else {
      return (<Home lock={this.lock} />);
    }
  }
});

Essa função verifica a presença de um JWT no armazenamento local e também de um no hash do URL. Se não houver nada no armazenamento local e houver algo no hash do URL, ela salva o id_token do hash no armazenamento local para que possa ser usado posteriormente.

Documentação do Auth0Lock para obter mais detalhes.

O Auth0Lock vem com um método que aceita o JWT do usuário e retorna o perfil dele ou dela. O objeto de perfil retornado tem algumas informações úteis, como o apelido, o e-mail e o URL do avatar do usuário, e podemos usar isso para criar uma página de perfil. Vamos fazer isso em um componente chamado LoggedIn.

// LoggedIn.jsx

var LoggedIn = React.createClass({
  getInitialState: function() {
    return {
      profile: null
    }
  },

  componentDidMount: function() {
    // The token is passed down from the App component 
    // and used to retrieve the profile
    this.props.lock.getProfile(this.props.idToken, function (err, profile) {
      if (err) {
        console.log("Error loading the Profile", err);
        return;
      }
      this.setState({profile: profile});
    }.bind(this));
  },

  render: function() {
    if (this.state.profile) {
      return (
        <img src={this.state.profile.picture} />
        <h2>Welcome {this.state.profile.nickname}</h2>
      );
    } else {
      return (
        <div className="loading">Loading profile</div>
      );
    }
  }
});

Obviamente, um dos principais motivos para a autenticação é o acesso a recursos protegidos. A primeira etapa para proteger os endpoints de API é configurar um middleware no servidor que use a chave secreta do aplicativo para verificar os JWTs recebidos. Com o JWT do usuário salvo no armazenamento local, o senhor pode fazer chamadas para seus endpoints protegidos e enviar o token para ser verificado quanto à validade.

este projeto de sementes para obter um exemplo rápido de como configurar um aplicativo Express com middleware JWT.

O método de envio de solicitações XHR para o backend fica a seu critério, desde que o senhor possa anexar um cabeçalho personalizado. Usando o fetch APIé tão simples quanto passar um objeto com alguma configuração.

 // LoggedIn.jsx

 ...
 callApi: function() {
  var getFoos = fetch('/api/foos', {
    headers: {
      'Authorization': 'Bearer ' + localStorage.getItem('id_token')
    },
    method: 'GET',
    cache: false
  });

  getFoos.then(function (response) {
    response.json().then(function (foos) {
      // Put the results on a property
      // to be displayed in the view
      console.log('the foos:', foos);
    });
  });
}
...

O JWT do usuário é enviado como um Authorization com o cabeçalho Bearer .

Fazer o logout é tão simples quanto remover o JWT do usuário do armazenamento local.

localStorage.removeItem('id_token');
// Redirect to the home route

JTI para colocar tokens na lista negra. A expiração do token pode ser controlada nas configurações do seu aplicativo na área de gerenciamento.

O senhor também pode habilitar a autenticação multifator na seção Multifactor Auth (Autenticação multifator) link. Depois de selecionar o Google Authenticator ou o Duo como seu provedor de MFA, basta inserir o ID do cliente do seu aplicativo no campo CLIENTS_WITH_MFA que aparece no trecho de código. Agora, quando seus usuários fizerem login, eles serão solicitados a passar pelo processo de autenticação em duas etapas uma vez a cada 30 dias.

este artigo sobre o assunto, bem como o correspondente correspondente.

Auth0 oferece uma solução drop-in que elimina toda a complexidade e permite que o senhor concentre seus esforços no desenvolvimento do aplicativo real. Os tokens da Web JSON oferecem um método sem estado de autenticação de usuários e proteção de endpoints de API, e essa é a solução perfeita para aplicativos de página única, como os criados com o React.

Para obter mais detalhes sobre a implementação do Auth0 em um aplicativo React, acesse o documentação. O senhor também pode consultar o quickstart docs para encontrar SDKs e amostras de todas as bibliotecas e estruturas populares de front-end, back-end e dispositivos móveis. Aqui está uma amostra do que está disponível:

Request Metrics monitoramento de usuários reais

Monitoramento de usuários reais do Request Metrics

Sobre Ryan Chenkie

Ryan é um desenvolvedor full-stack canadense que cria conteúdo para a Auth0, incluindo tutoriais detalhados e projetos iniciais para as mais novas estruturas e tecnologias, como Angular 2, React e Aurelia. Quando não está programando, ele pode ser encontrado com sua esposa, tocando violão ou se interessando pelo espaço sideral.