Autenticação Simples com Kinde.com

1. Introdução

Kinde é uma plataforma que facilita a integração de autenticação em suas aplicações. Ele oferece um sistema de login pronto para uso, com suporte a diferentes métodos de autenticação como e-mail e senha, redes sociais, e SSO corporativo.

Neste post, vamos criar um exemplo simples de como implementar a autenticação usando o Kinde em uma aplicação React.

2. Configuração Inicial

Primeiro, precisamos criar uma conta no Kinde.com e configurar um novo projeto.

Acesse o Kinde e crie sua conta. Crie um novo aplicativo na dashboard do Kinde. Anote o Client ID e o **Client Secret ** gerados para o aplicativo. Não esqueça de configurar o callback do redirect uri e logout uri na plataforma.

3. Implementando a Autenticação

Vamos usar React para criar uma aplicação simples que permita login com Kinde.

3.1. Instalando as Dependências

No seu projeto React, instale o SDK do Kinde:

npm install @kinde-oss/kinde-auth-react

3.2. Configurando o SDK

No arquivo principal da sua aplicação (por exemplo, App.jsx), configure o Kinde:

import {KindeProvider, useKindeAuth} from "@kinde-oss/kinde-auth-react";

import UserProfile from './UserProfile';

const App = () => {
  return (
    <KindeProvider
      domain="YOUR DOMAIN"
      clientId="YOUR CLIENT ID"
      redirectUri="YOUR REDIRECT URI"
      logoutUri="YOUR LOGOUT URI"
    >
      <LoginButton />
      
    </KindeProvider>
  );
};

const LoginButton = () => {
  const { login } = useKindeAuth();
  const { isAuthenticated } = useKindeAuth();

  return (
    isAuthenticated ? '' : <button onClick={() => login()}>Login with Kinde</button>
  );
};

export default App;

3.3. Manipulando a Autenticação

Depois que o usuário fizer login, você pode obter informações sobre ele ou gerenciar seu estado de autenticação:

import React from 'react';
import { useKindeAuth } from '@kinde-oss/kinde-sdk';

const UserProfile = () => {
  const { user, isAuthenticated, logout } = useKindeAuth();

  if (!isAuthenticated) {
    return <p>Você não está logado.</p>;
  }

  return (
    <div>
      <h2>Bem-vindo, {user?.name}!</h2>
      <button onClick={() => logout()}>Logout</button>
    </div>
  );
};

3.4. Exibindo o Perfil do Usuário

Atualize o componente App para incluir a exibição do perfil:

import {KindeProvider, useKindeAuth} from "@kinde-oss/kinde-auth-react";
import UserProfile from './UserProfile';

const App = () => {
  return (
    <KindeProvider
      domain="YOUR DOMAIN"
      clientId="YOUR CLIENT ID"
      redirectUri="YOUR REDIRECT URI"
      logoutUri="YOUR LOGOUT URI"
    >
      <LoginButton />

      <UserProfile />
    </KindeProvider>
  );
};

const LoginButton = () => {
  const { login } = useKindeAuth();
  const { isAuthenticated } = useKindeAuth();

  return (
    isAuthenticated ? '' : <button onClick={() => login()}>Login with Kinde</button>
  );
};

export default App;

4. Conclusão

Com esses passos, você configurou uma autenticação básica usando o Kinde em sua aplicação React. O Kinde facilita a integração de autenticação segura, permitindo que você foque em construir suas funcionalidades sem se preocupar com a complexidade da segurança.

Aqui o link da aplicação no GitHub.

Bonus

A plataforma permite que seja configurado inúmeros serviços de autenticação, desde o Gmail, Facebook, como Slack, Discord e etc, vale a pena conferir.