Casos de uso

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

<template>
  <SignInButton fallbackRedirectUrl="/dashboard" />
  <SignUpButton fallbackRedirectUrl="/dashboard" />
</template>

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

Comportamento:

Ao clicar em "Cadastre aqui" no modal de login, o conteúdo muda para o formulário de cadastro

Ao clicar em "Faça login" no modal de cadastro, o conteúdo muda para o formulário de login

Após autenticação bem-sucedida, o modal fecha e redireciona para fallbackRedirectUrl

Usando Formulários em Páginas Dedicadas

<template>
  <div class="login-page">
    <SignIn
      fallbackRedirectUrl="/dashboard"
      signUpUrl="/cadastro"
    />
  </div>
</template>

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

Controle de Acesso por Autenticação

<template>
  <div>
    <SignedOut>
      <h1>Bem-vindo! Faça login para continuar</h1>
      <SignInButton />
    </SignedOut>

    <SignedIn>
      <h1>Área Restrita</h1>
      <UserProfile />
    </SignedIn>
  </div>
</template>

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

Usando Botões com Modal#

Usando Formulários em Páginas Dedicadas#

Controle de Acesso por Autenticação#

Usando Botões com Modal

Usando Formulários em Páginas Dedicadas

Controle de Acesso por Autenticação