consul/ui/packages/consul-ui/app/components/auth-dialog

---
class: ember
---
# AuthDialog

```hbs preview-template
<AuthDialog @dc={{'dc-1'}} @nspace={{'default'}} @onchange={{action (noop)}} as |api components|>
  {{#let components.AuthForm components.AuthProfile as |AuthForm AuthProfile|}}
    <BlockSlot @name="unauthorized">
      Here's the login form:
      <AuthForm />
    </BlockSlot>
    <BlockSlot @name="authorized">
      Here's your profile:
      <AuthProfile />
      <button onclick={{action api.logout}}>Logout</button>
    </BlockSlot>
  {{/let}}
</AuthDialog>
```

### Arguments

A component to help orchestrate a login/logout flow.

| Argument | Type | Default | Description |
| --- | --- | --- | --- |
| `dc` | `String` | | The name of the current datacenter |
| `nspace` | `String` | | The name of the current namespace |
| `onchange` | `Function` | | An action to fire when the users token has changed (logged in/logged out/token changed) |

### Methods/Actions/api

| Method/Action |  Description |
| --- | --- |
| `login` | Login with a specified token |
| `logout` | Logout (delete token) |
| `token` | The current token itself (as a property not a method) |

### Components

| Name |  Description |
| --- | --- |
| [`AuthForm`](../auth-form/README.mdx) | Renders an Authorization form |
| [`AuthProfile`](../auth-profile/README.mdx) | Renders a User Profile |

### Slots

| Name  | Description |
| --- | --- |
| `unauthorized` | This slot is only rendered when the user doesn't have a token |
| `authorized`   | This slot is only rendered whtn the user has a token.|

### See

- [Component Source Code](./index.js)
- [Template Source Code](./index.hbs)

---