Nuxt

Integrate Nile Auth with Nuxt applications

This guide will help you get started with Nile Auth and Nuxt. This guide outlines the steps required to configure and integrate authentication in your application.

If you have not done so yet, be sure you have obtained credentials from the console.

1. Install packages

   npm

     npm install @niledatabase/server @niledatabase/nitro @niledatabase/client
   

2. Configure the extension

   Create the base nile instance, extended with the nitro plugin

   app/composables/useNile.ts

   import { Nile } from "@niledatabase/server";
   import { nitro } from "@niledatabase/nitro";
   import type { withNitro } from "@niledatabase/nitro";
   
   export const nile = Nile<withNitro>({
     debug: true,
     extensions: [nitro],
   }));
   
   

3. Add the route so that the APIs can be handled

   server/api/[...slug].ts

   import { nile } from "~/composables/useNile";
   export default defineEventHandler(nile.handlers);
   

Client side

For requests in Vue, you can do the following

<template>
<-- Sign in form here -->
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { signUp } from '@niledatabase/client';

const email = ref('')
const password = ref('')
const error = ref<string | null>(null)

const handleSignIn = async () => {

  try {
    const response = await signUp({
      email: email.value,
      password: password.value,
    })

    console.log('Signed in successfully:', response)

    // Optional: redirect, store session, etc.
    // await navigateTo('/dashboard')

  } catch (err: any) {
    error.value = err?.message || 'Sign-in failed'
    console.error('Sign-in error:', err)
  }
}
</script>

Not every API call is supported in the client. You may need to call some routes via the framework useFetch('/api/tenants'), or defineEventHandler

server/api/submit-invite.post.ts

export default defineEventHandler(async (event) => {
  const ctxNile = nile.withContext({ headers: event.headers });
  const body = await readBody(event);
  const res = ctxNile.tenants.invite({ email: body.email });
  if (res instanceof Response) {
    return { message: "An error has occurred" };
  }
  return { message: "Invite sent" };
});