mirror of
https://github.com/better-auth/better-auth.git
synced 2026-08-29 22:40:21 -05:00
112 lines
3.1 KiB
Plaintext
112 lines
3.1 KiB
Plaintext
---
|
|
title: Nuxt.js
|
|
description: Learn how to integrate Better Auth with Nuxt.js
|
|
---
|
|
|
|
|
|
## Installation
|
|
|
|
First, install Better Auth
|
|
|
|
```package-install
|
|
npm install better-auth
|
|
```
|
|
|
|
## Set Environment Variables
|
|
|
|
Create a `.env` file in the root of your project and add the following environment variables:
|
|
|
|
**Set Base URL**
|
|
```txt title=".env"
|
|
BETTER_AUTH_URL=http://localhost:3000 # Base URL of your Next.js app
|
|
```
|
|
|
|
**Set Secret**
|
|
|
|
Random value used by the library for encryption and generating hashes. You can generate one using the button below or you can use something like openssl.
|
|
```txt title=".env"
|
|
BETTER_AUTH_SECRET=
|
|
```
|
|
|
|
<GenerateSecret/>
|
|
|
|
## Configure Server
|
|
|
|
### Create Better Auth instance
|
|
|
|
We recommend to create `auth.ts` file inside your `lib/` directory. This file will contain your Better Auth instance.
|
|
|
|
```ts twoslash title="auth.ts"
|
|
import { betterAuth } from "better-auth"
|
|
|
|
export const { api, handler } = betterAuth({
|
|
database: {
|
|
provider: "sqlite", //change this to your database provider
|
|
url: "./db.sqlite", // path to your database or connection string
|
|
}
|
|
// Refer to the api documentation for more configuration options
|
|
})
|
|
```
|
|
|
|
<Callout type="warn">
|
|
Better Auth currently supports only SQLite, MySQL, and PostgreSQL. It uses Kysely under the hood, so you can also pass any Kysely dialect directly to the database object.
|
|
</Callout>
|
|
|
|
### Create API Route
|
|
|
|
We need to mount the handler to an API route. Create a file inside `/server/api` called `[...auth].ts` and add the following code:
|
|
|
|
```ts title="server/api/[...auth].ts"
|
|
import { handler } from "~/utils/auth.config";
|
|
|
|
export default defineEventHandler((event) => {
|
|
return handler(toWebRequest(event));
|
|
});
|
|
```
|
|
<Callout type="info">
|
|
You can change the path on your better-auth configuration but it's recommended to keep it as `/api/[...auth]`
|
|
</Callout>
|
|
|
|
### Migrate the database
|
|
Run the following command to create the necessary tables in your database:
|
|
|
|
```bash
|
|
npx better-auth migrate
|
|
```
|
|
|
|
## Create a client
|
|
|
|
Create a client instance. You can name the file anything you want. Here we are creating `client.ts` file inside the `lib/` directory.
|
|
|
|
```ts twoslash title="client.ts"
|
|
import { createAuthClient } from "better-auth/vue" // make sure to import from better-auth/vue
|
|
|
|
export const client = createAuthClient({
|
|
//you can pass client configuration here
|
|
})
|
|
```
|
|
|
|
Once you have created the client, you can use it to sign up, sign in, and perform other actions.
|
|
Some of the actinos are reactive. The client use [nano-store](https://github.com/nanostores/nanostores) to store the state and re-render the components when the state changes.
|
|
|
|
### Example usage
|
|
|
|
```vue title="index.vue"
|
|
<template>
|
|
<div style="">
|
|
<button v-if="!client.useSession().value" @click="() => client.signIn.social({
|
|
provider: 'github'
|
|
})">
|
|
Continue with github
|
|
</button>
|
|
<div>
|
|
<pre>{{ client.useSession().value }}</pre>
|
|
<button v-if="client.useSession().value" @click="client.signOut()">
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
```
|
|
|