---
title: "Authentication"
description: "Learn how to authenticate users with the Strapi module in your Nuxt application."
canonical_url: "https://strapi.nuxtjs.org/auth"
---
# Authentication

> Learn how to authenticate users with the Strapi module in your Nuxt application.

> This module exposes composables that are [auto-imported](https://nuxt.com/docs/guide/directory-structure/composables) by Nuxt.

## Configuration

When using `@nuxtjs/strapi` for authentication, the user jwt token will be stored in a cookie (`strapi_jwt` by default). By using the default cookie configuration, the expiration will be set to `Session`, which means the cookie will disappear when the browser is closed, and users will have to log in everytime.

If you want your cookie to stay longer, we recommend using the configuration below (expiration is set to 14 days, feel free to change it):

```ts [nuxt.config.ts]
export default defineNuxtConfig({
  strapi: {
    cookie: {
      path: '/',
      maxAge: 14 * 24 * 60 * 60,
      secure: process.env.NODE_ENV === 'production',
      sameSite: true
    }
  }
})
```

## `useStrapiUser`

Once logged in, you can access your user everywhere:

```ts
const user = useStrapiUser()
```

> Learn how to protect your routes by writing your own [auth middleware composable](https://strapi.nuxtjs.org/advanced#auth-middleware).

## `useStrapiToken`

This composable is an helper to get the jwt token. It is used internally to get the `strapi_jwt` cookie. If the latter does not exist, this uses the config variable `token`

```ts
const token = useStrapiToken()
```

## `useStrapiAuth`

This composable exposes all the methods available in the Strapi [Users & Permissions plugin](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html).

<tip>

On `login`, `register`, `resetPassword` and `authenticateProvider` methods, the user is populated through the [`fetchUser`](https://strapi.nuxtjs.org/auth#fetchuser) method.

</tip>

### `login`

Submit the user's identifier and password credentials for authentication. Sets [`user`](https://strapi.nuxtjs.org/auth#usestrapiuser) and [`token`](https://strapi.nuxtjs.org/auth#usestrapitoken).

- **Arguments:**
  - data: [`StrapiAuthenticationData`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L538)
- **Returns:** [`Promise<StrapiAuthenticationResponse>`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L533)

```vue [pages/login.vue]
<script setup lang="ts">
const { login } = useStrapiAuth()
const router = useRouter()

const onSubmit = async () => {
  try {
    await login({ identifier: '', password: '' })

    router.push('/authenticated-page')
  } catch (e) {}
}
</script>
```

> Check out the Strapi [Login](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#login) documentation.

### `logout`

Unset [`user`](https://strapi.nuxtjs.org/auth#usestrapiuser) and [`token`](https://strapi.nuxtjs.org/auth#usestrapitoken).

```vue
<script setup lang="ts">
const { logout } = useStrapiAuth()
const router = useRouter()

const onClick = () => {
  logout()

  router.push('/')
}
</script>
```

### `register`

Creates a new user in the database with a default role as `Authenticated`.

Custom user fields, if added to the content type, e.g. `phoneNumber`, can be added to the payload as well.

- **Arguments:**
  - data: [`StrapiRegistrationData`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L543)
- **Returns:** [`Promise<StrapiAuthenticationResponse>`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L533)

```vue [pages/register.vue]
<script setup lang="ts">
const { register } = useStrapiAuth()
const router = useRouter()

const onSubmit = async () => {
  try {
    await register({ username: '', email: '', password: '', phoneNumber: '' })

    router.push('/authenticated-page')
  } catch (e) {}
}
</script>
```

> Check out the Strapi [Registration](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#registration) documentation.

### `forgotPassword`

This action sends an email to a user with the link to your own reset password page. The link will be enriched with the url param code that is needed for the [`resetPassword`](https://strapi.nuxtjs.org/auth#resetpassword).

- **Arguments:**
  - data: [`StrapiForgotPasswordData`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L550)
- **Returns:** `Promise<void>`

```vue [pages/forgot.vue]
<script setup lang="ts">
const { forgotPassword } = useStrapiAuth()
const router = useRouter()

const onSubmit = async () => {
  try {
    await forgotPassword({ email: '' })

    router.push('/')
  } catch (e) {}
}
</script>
```

> Check out the Strapi [Forgot & Reset flow](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#reset-password) documentation.

### `resetPassword`

This action will update the user password. Sets [`user`](https://strapi.nuxtjs.org/auth#usestrapiuser) and [`token`](https://strapi.nuxtjs.org/auth#usestrapitoken).

- **Arguments:**
  - data: [`StrapiResetPasswordData`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L554)
- **Returns:** [`Promise<StrapiAuthenticationResponse>`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L533)

```vue [pages/reset.vue]
<script setup lang="ts">
const { resetPassword } = useStrapiAuth()
const router = useRouter()

const onSubmit = async () => {
  try {
    await resetPassword({ code: '', password: '', passwordConfirmation: '' })

    router.push('/authenticated-page')
  } catch (e) {}
}
</script>
```

> Check out the Strapi [Forgot & Reset flow](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#reset-password) documentation.

### `changePassword`

You can also update an authenticated user password through the `/change-password` API endpoint:

- **Arguments:**
  - data: [`StrapiChangePasswordData`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L560)
- **Returns:** `Promise<void>`

```vue
<script setup lang="ts">
const { changePassword } = useStrapiAuth()

const onSubmit = async () => {
  try {
    await changePassword({ currentPassword: '', password: '', passwordConfirmation: '' })

    $toast.success('Password changed!')
  } catch (e) {}
}
</script>
```

> Check out the Strapi [Change password flow](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#reset-password) documentation.

### `sendEmailConfirmation`

This action will re-send the confirmation sent after [`registration`](https://strapi.nuxtjs.org/auth#register).

- **Arguments:**
  - data: [`StrapiEmailConfirmationData`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L566)
- **Returns:** `Promise<void>`

```vue
<script setup lang="ts">
const { sendEmailConfirmation } = useStrapiAuth()

const onSubmit = async () => {
  try {
    await sendEmailConfirmation({ email: '' })

    alert('Success!')
  } catch (e) {}
}
</script>
```

> Check out the Strapi [Email validation](https://docs.strapi.io/developer-docs/latest/plugins/users-permissions.html#email-validation) documentation.

### `getProviderAuthenticationUrl`

Return the correct URL to authenticate with provider.

- **Arguments:**
  - provider: [`StrapiAuthProvider`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L506)
- **Returns:** `string`

```vue [pages/login.vue]
<script setup lang="ts">
const { getProviderAuthenticationUrl } = useStrapiAuth()

const onClick = () => {
  window.location.href = getProviderAuthenticationUrl('github')
}
</script>
```

### `authenticateProvider`

Authenticate user with external provider. Sets [`user`](https://strapi.nuxtjs.org/auth#usestrapiuser) and [`token`](https://strapi.nuxtjs.org/auth#usestrapitoken).

- **Arguments:**
  - provider: [`StrapiAuthProvider`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L506)
  - access_token: `string`
- **Returns:** [`Promise<StrapiAuthenticationResponse>`](https://github.com/nuxt-modules/strapi/blob/main/src/runtime/types/index.ts#L533)

```vue [pages/auth/[provider]/callback.vue]
<script setup lang="ts">
const { authenticateProvider } = useStrapiAuth()
const route = useRoute()

await authenticateProvider('github', route.query.access_token)
</script>
```

### `fetchUser`

Fetch `me` user from `/users/me` route if a [`token`](https://strapi.nuxtjs.org/auth#usestrapitoken) exists in the cookies then sets [`user`](https://strapi.nuxtjs.org/auth#usestrapiuser).

<tip>

This method is called by default on init through a [Nuxt plugin](https://nuxt.com/docs/guide/directory-structure/plugins), so you don't have to. When the page is rendered on the server, the data are hydrated client-side so the HTTP call happens only once. It is skipped when the static [`token`](https://strapi.nuxtjs.org/setup#token) is used.

</tip>

```vue
<script setup lang="ts">
const { fetchUser } = useStrapiAuth()

const user = await fetchUser()
</script>
```

> Learn how to populate relations in [`/users/me` route](https://strapi.nuxtjs.org/setup#authpopulate).


## Sitemap

See the full [sitemap](https://strapi.nuxtjs.org/sitemap.md) for all pages.