Drizzle ORM SQLite and Nuxt - Integrating Nuxt Auth, Part 1
Tags: nuxt, drizzle, vue, orm
Published: 2023-08-10 03:43:29

###The Series

1. [Drizzle ORM, SQLite and Nuxt JS - Getting Started](https://dev.to/aaronksaunders/drizzle-orm-sqlite-and-nuxt-js-getting-started-374m)
2. Drizzle ORM SQLite and Nuxt - Integrating Nuxt Auth, Part 1
3. [Drizzle ORM SQLite and Nuxt - Integrating Nuxt Auth, Part 2](https://dev.to/aaronksaunders/drizzle-orm-sqlite-and-nuxt-integrating-nuxt-auth-part-2-2ena)

---

##Overview
In this series, we will use the package [@sidebase/nuxt-auth](https://sidebase.io/nuxt-auth/getting-started) -  to implement email + password authentication in the application. We will create login and register API routes that utilize [Drizzle ORM](https://orm.drizzle.team/) connected to an SQLite Database

This blog post is a walkthrough of the code added to the application as we work though the video, meaning this is a companion post to support the video

###VIDEO
{% youtube pQtFvO4ks8o %}

> see first video in series here [Drizzle ORM SQLite and Nuxt](https://youtu.be/g6MDN9To9K4)

####Install Sidebase Nuxt Auth
in your nuxt project directory run the follwoing commands to install the nuxt-auth module and dependencies
```
npm i -D @sidebase/nuxt-auth
npm i -D next-auth@4.21.1
```

####Configure Project
Add the module, and add additional property to use global auth middleware by default; meaning that you must be authenticated to access any page in the app.
```javascript
export default defineNuxtConfig({
   modules: ['@sidebase/nuxt-auth'],
   auth : {
    globalAppMiddleware: false
   }
})
```

####Add NuxtAuthHandler
Since we are using the `credentials` provider, i discovered `local` provider later in the process will investigate later.

the file needs to be at a specific path `server/api/auth/[...].ts`

```javascript
// file: ~/server/api/auth/[...].ts
import CredentialsProvider from 'next-auth/providers/credentials'
import { NuxtAuthHandler } from '#auth'

export default NuxtAuthHandler({
  // A secret string you define, to ensure correct encryption
  secret: 'your-secret-here',
  providers: [
    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
    CredentialsProvider.default({

      credentials: {
        username: { label: 'Username', type: 'text', placeholder: '(hint: jsmith)' },
        password: { label: 'Password', type: 'password', placeholder: '(hint: hunter2)' }
      },
      authorize (credentials: any) {

        const user = { id: '1', name: 'J Smith', username: 'jsmith', password: 'hunter2' }

        if (credentials?.username === user.username && credentials?.password === user.password) {
          // Any object returned will be saved in `user` property of the JWT
          return user
        } else {
          // eslint-disable-next-line no-console
          console.error('Warning: Malicious login attempt registered, bad credentials provided')

          return null

        }
      }
    })
  ]
})

```

Now lets add a protected page so we have something to see when we authenticate a user.

we will delete the `app.vue` file from the project directory and create a `pages` directory and add a file named `index.vue` with the following contents

```tsx
<template>
  WELCOME TO MY APP
</template>
<script setup lang="ts">
</script>
```

Now after you login to the application you should be redirected to this page. If you try to go directly to the `index.vue` page you will be re-routed to the default login page created by `nuxt-auth`


####Session Data and More From `useAuth`
We can use the `useAuth` composable to get information from the `nuxt-auth` service in your application. We to get some information from the session so we use the composable like this, where the session information is in `data` and the authentication state is in `status`
```jsx
<template>
  WELCOME TO MY APP
  <p>DATA: {{ JSON.stringify(data) }}</p>
  <p>AUTH STATUS: {{ status }}</p>
</template>
<script setup lang="ts">
const { data, status } = useAuth();

const { data: users } = useFetch("/api/users");
</script>
```

####Adding SignOut
We can use the `useAuth` composable to access helper functions from the `nuxt-auth` service in your application, in this case we need the `signOut` function.

In the code below we added a button and are calling the `signout` method when the button is clicked.

```jsx
<template>
  WELCOME TO MY APP

  <p>DATA: {{ JSON.stringify(data) }}</p>
  <p>AUTH STATUS: {{ status }}</p>

  <button @click="() => signOut()">
     SIGN OUT
  </button>
</template>
<script setup lang="ts">
const { data, status, signOut } = useAuth();

const { data: users } = useFetch("/api/users");
</script>
```

####Demonstrating Protected API Routes
In the video we test this by adding the following code to the `users.get.ts` route and trying to access the route using [Thunder Client](https://www.thunderclient.com/) or any REST API client.

You will get the `unauthenticated` status response because there is no session information.
```javascript
import { getServerSession } from '#auth'

...

  const session = await getServerSession(event)
  if (!session) {
    return { status: 'unauthenticated!' }
  }
```
When you change the code in `index.vue` to do the same query, it will work because to get to the `index.vue` page,  the user must be authenticated.

This is the code for the updated `index.vue` page.
```jsx
<template>
  WELCOME TO MY APP

  <p>DATA: {{ JSON.stringify(data) }}</p>
  <p>STATUS: {{ status }}</p>

  <pre>USERS: {{ JSON.stringify(users, null,2) }}</pre>

  <button @click="() => signOut()">
    SIGN OUT
  </button>
</template>
<script setup lang="ts">
const { data, status, signOut } = useAuth();

const { data: users } = useFetch("/api/users");
</script>
```

###Links
- Sidebase Nuxt-Auth -https://sidebase.io/nuxt-auth/getting-started
- Drizzle Quick Start - https://orm.drizzle.team/docs/quick-start
- Drizzle Kit - https://orm.drizzle.team/kit-docs/overview
- Drizzle ORM Sqlite - https://github.com/drizzle-team/drizzle-orm/blob/main/drizzle-orm/src/sqlite-core/README.md
- Better Sqlite 3 - https://github.com/WiseLibs/better-sqlite3

###Social Media 
- Twitter - https://twitter.com/aaronksaunders
- Facebook - https://www.facebook.com/ClearlyInnovative
- Instagram - https://www.instagram.com/aaronksaunders
- Dev.to - https://dev.to/aaronksaunders
- YouTube - https://www.youtube.com/@Aaronsaundersci