aaaalibteste v1.0.3

Accounts Auth

Sobre

SDK para fazer integração de aplicações react com o accounts, sistema de autenticação único da Eduzz. Seu escopo é autenticação, e não autorização.

Pré-requisitos

• Aplicação frontend em React
• Aplicação backend deve disponibilizar dois endpoints
  • /auth/login que recebe o parâmetro accountToken no body
  • /auth/refreshtoken que recebe o parâmetro refreshToken no body
• CDN do script fornecido pela Eduzz, adicionado no index.html

Tabela de conteúdos

1. Sobre

2. Instalação

   • Configurar script Eduzz
   • Instalar O SDK

3. Como usar

   • Importar o AuthProvider do SDK
   • Usar AuthProvider

Instalação

1. Colocar o script fornecido pela Eduzz, em root/public/index.html do projeto react.

<script rel="preconnect" src="https://cdn.eduzzcdn.com/accounts/accounts.js"></script>

2. Instalar O SDK (temporário)

• Clonar esse repositório

    git clone git@bitbucket.org:<seu-usuario-bit-bucket>/auth-accounts.git

• No diretório raiz, executar os comandos abaixo:

    npm install ou yarn
    npm link

• No projeto que irá usar o SDK, executar o comando abaixo:

    npm link accounts-auth

Como usar

1. Importar o AuthProvider e envolver a árvore de elementos da aplicação

import { AuthProvider, authentication } from "accounts-auth"

ReactDOM.render(
  <React.StrictMode>
    <AuthProvider
      // Definições disponibilizadas pela Eduzz para configuração do script accounts
      accounts={{
        // Código do parceiro disponibilizado junto a Eduzz
        partnerId: process.env.REACT_APP_ACCOUNTS_PARTNER_ID || "",
        // Em desenvolvimento utilizar 'homolog'
        env: process.env.REACT_APP_ACCOUNTS_ENV || "",
      }}
      // Definições para o backend do produto que está sendo desenvolvido
      api={{
        // Url da api em questão
        url: `${process.env.REACT_APP_API_URL}/api` || "",
      }}
      // Hook que foi importado do própio SDK
      authentication={authentication}
    >
      <App />
    </AuthProvider>
  </React.StrictMode>,
  document.getElementById("root")
)

2. Importar hook useAuth e utlizar no componente

import { useAuth } from "accounts-auth"

function App() {
  const { user, loading } = useAuth()

  return (
    <div className="App">
      <header className="App-header">
        {user ? <p>user: {user?.unique_name}</p> : <p>loading: {loading}</p>}
      </header>
    </div>
  )
}

Tecnologias

• React
• Axios
• Jest
• Typescript
• Babel
• JSONWebToken