@autenticar-me/vue

Pacote Vue para integração com a plataforma Autenticar.me.

Sobre

Este pacote fornece componentes, composables e utilitários para facilitar a implementação de autenticação e gerenciamento de usuários em aplicações Vue utilizando a Autenticar.me.

Instalação

npm install @autenticar-me/vue

Uso Básico

Configuração do Plugin

import { createApp } from 'vue'
import { atmPlugin } from '@autenticar-me/vue'
import App from './App.vue'

const app = createApp(App)

app.use(atmPlugin, {
  domain: 'seu-dominio.autenticar.me',
  publicKey: 'sua-chave-publica'
})

app.mount('#app')

Composables Disponíveis

• useAtm() - Acesso ao contexto completo da Autenticar.me
• useAtmClient() - Cliente da API
• useAuth() - Gerenciamento de autenticação

Componentes Disponíveis

Botões

• SignInButton - Botão de login que abre modal
• SignOutButton - Botão de logout
• SignUpButton - Botão de cadastro que abre modal

Formulários

• SignIn - Formulário de login completo com logo e rodapé
• SignUp - Formulário de cadastro completo com logo e rodapé

Layouts

• SignedIn - Wrapper para conteúdo visível apenas para usuários autenticados
• SignedOut - Wrapper para conteúdo visível apenas para usuários não autenticados

Outros

• AuthSwitcher - Alterna entre estados autenticado/não autenticado
• UserProfile - Perfil do usuário
• Notification - Sistema de notificações

Exemplos de Uso

Usando Botões com Modal (Mais Simples)

Os botões abrem modais com os formulários e permitem alternância automática entre login/cadastro:

<template>
  <SignInButton redirect="/dashboard" signUpLink="/cadastro" />
  <SignUpButton redirect="/onboarding" signInLink="/login" />
</template>

<script setup>
import { SignInButton, SignUpButton } from '@autenticar-me/vue'
</script>

Comportamento:

• SignInButton: Abre modal com formulário de login. Se usuário clicar em "Cadastre aqui", alterna para formulário de cadastro dentro do modal (ou navega para signUpLink se fornecido)
• SignUpButton: Abre modal com formulário de cadastro. Se usuário clicar em "Já tem uma conta?", alterna para formulário de login dentro do modal (ou navega para signInLink se fornecido)
• Após autenticação bem-sucedida, fecha o modal e redireciona para a rota especificada em redirect

Usando Formulários com Redirecionamento e Navegação

<template>
  <div class="login-page">
    <h1>Faça login</h1>
    <SignIn redirect="/dashboard" signUpLink="/cadastro" />
  </div>
</template>

<script setup>
import { SignIn } from '@autenticar-me/vue'
</script>

<template>
  <div class="signup-page">
    <h1>Criar conta</h1>
    <SignUp redirect="/onboarding" signInLink="/login" />
  </div>
</template>

<script setup>
import { SignUp } from '@autenticar-me/vue'
</script>

Props disponíveis:

• redirect - Rota para redirecionar após login/cadastro bem-sucedido
• signUpLink (SignIn) - Rota para a página de cadastro (ao clicar em "Cadastre aqui")
• signInLink (SignUp) - Rota para a página de login (ao clicar em "Já tem uma conta?")

Redirecionamento Customizado

<template>
  <SignIn @completed="handleLogin" />
</template>

<script setup>
import { SignIn } from '@autenticar-me/vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const handleLogin = () => {
  router.push('/minha-rota')
}
</script>

Tipos

O pacote exporta tipos TypeScript para:

• User - Tipo do usuário
• Session - Tipo da sessão
• Configurations - Configurações da plataforma
• UserAttribute - Atributos do usuário

Licença

MIT