# Auth Modal

> An authentication modal with social login buttons and email form.

<demo-auth-modal>



</demo-auth-modal>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/auth-modal.json"
```

## Usage

```vue
<script setup lang="ts">
  import AuthModal from '~/components/ui/auth-modal/AuthModal.vue';

  const open = ref(false);
</script>

<template>
  <button @click="open = true">Open Auth Modal</button>
  <AuthModal v-model:open="open" />
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        trigger-text
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        'Sign up / Sign in'
      </code>
    </td>
    
    <td>
      Text on the trigger button
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Additional CSS classes for the trigger button
    </td>
  </tr>
</tbody>
</table>

## Events

<table>
<thead>
  <tr>
    <th>
      Event
    </th>
    
    <th>
      Payload
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        login
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Emitted when a social provider or email is selected. Payload is the provider name (e.g. <code>
        'Google'
      </code>
      
      , <code>
        'email'
      </code>
      
      ).
    </td>
  </tr>
</tbody>
</table>