Starter Project

To help save some time, I’ve set up a starter project for us to begin from. Our AdonisJS API can be found within the backend directory and our Nuxt 3 application can be found in frontend.

Our AdonisJS API has Lucid already installed and configured and some stubbed methods we’ll be filling out in this lesson.

Our Nuxt 3 client has Nuxt UI installed, a form utility I like to use added, and a few pages stubbed so we’re not wasting time on HTML.

You can find the starter repository here, and follow along if you wish.

Configuring Our AdonisJS API

First, let’s get AdonisJS Auth installed.

npm i @adonisjs/auth

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Next, let’s configure it within our project, use the below selections to answer each configuration prompt.

node ace configure @adonisjs/auth

# › Select provider for finding your users → Lucid
# › Select which guard you need for authentication → Web
# › Enter model name to be used for authentication → User
# › Create migration for users table? → True

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

You may be wondering why are we using “web” instead of “api” for our auth guard. Since our Nuxt 3 application will live on the web and be accessed via browsers we’ll have access to cookies. Meaning, we’re free to use sessions to manage our authentication, making “web” the optimal solution for our use case.

Registering Silent Auth Middleware

I’m a fan of utilizing the silent auth middleware to authenticate each request, so let’s go ahead and register it. This is one of the middleware added to our project when we configured the AdonisJS Auth package.

Server.middleware.register([
  () => import('@ioc:Adonis/Core/BodyParser'),
  () => import('App/Middleware/SilentAuth') // 👈
])

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
start
kernel.ts

Installing Session Driver

Next, since this was started from the AdonisJS API template, we’ll need to install the session driver.

npm i @adonisjs/session

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Then, configure it.

node ace configure @adonisjs/session

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Lastly, add the env type to your env.ts file

// env.ts

SESSION_DRIVER: Env.schema.string()

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Enable CORS

Next, in order for our requests to succeed from our Nuxt 3 application, we’ll need to enable CORS. Since the domain will be shared, we don’t need to worry about anything else besides enabling it.

const corsConfig: CorsConfig = {
  enabled: false,
  enabled: true,

  // ...
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
config
cors.ts

Migrating Your Database

Lastly, let’s go ahead and migrate our database. At this point, this should just be our users table getting added with the default columns.

node ace migration:run

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

API Auth Routes

Since we’re using sessions for authentication, we can keep things simple here without dealing with tokens. All route handling is done within start/routes.ts for brevity.

Signing Up

First, let’s tackle signing up.

Route.post('/auth/sign-up', async ({ request, response }) => {
Route.post('/auth/sign-up', async ({ request, response, auth }) => {
  const data = await request.validate(AuthSignUpValidator)
  
  throw new NotImplementedException('POST /auth/sign-up has not been implemented')
  const user = await User.create(data)
  await auth.login(user)

  return response.json({ message: 'Thanks for joining!' })
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
start
routes.ts

Nothing special here, we’re just validating the data, creating our user, and logging that new user in using the default “web” guard.

Signing In

Next, let’s complete signing in.

Route.post('/auth/sign-in', async ({ request, response }) => {
Route.post('/auth/sign-in', async ({ request, response, auth }) => {
  const data = await request.validate(AuthSignInValidator)
  const { uid, password, rememberMe } = await request.validate(AuthSignInValidator)
  
  throw new NotImplementedException('POST /auth/sign-in has not been implemented')
  try {
    await auth.attempt(uid, password, rememberMe)
  } catch (_error) {
    return response.status(400).json({ message: 'Email or password is incorrect' })
  }

  return response.json({ message: `Welcome back!` })
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
start
routes.ts

Again, nothing special, we’re validating the data and logging in the user.

Auth Check & Signing Out

Let’s finish up our API endpoints by completing our auth check and sign-out.

Route.get('/auth', async () => {
Route.get('/auth', async ({ auth }) => {
  throw new NotImplementedException('GET /auth has not been implemented')
  return auth.user
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
start
routes.ts

Here we’re simply returning auth.user, this is nullable so if a user isn’t authenticated we’ll get back null. Otherwise, we’ll get the user.

--Route.post('/auth/sign-out', async () => {
Route.post('/auth/sign-out', async ({ auth }) => {
  throw new NotImplementedException('POST /auth/sign-out has not been implemented')
  await auth.logout()

  return response.json({ message: 'You have been signed out' })
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
start
routes.ts

Configuring Our Nuxt 3 Front End

The one thing we’ll need to configure within our Nuxt 3 application is an environment variable with our API url, since this will need to change between local and production environments.

Adding API Environment Variable

First, add a .env file at the root of our Nuxt 3 project with the following inside.

NUXT_PUBLIC_API=http://localhost:3333

Here, NUXT_PUBLIC is a prefix defined by Nuxt designating this environment variable is public and not a secret or confidential. The actual variable name here is just API.

Easily Accessing Our API Environment Variable

Next, let’s create a global accessor within our Nuxt project to simplify accessing our API environment variable.

Create a folder called plugins with a file inside it called env.ts and add the following inside.

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig()
  return {
    provide: {
      api: (path: string) => config.public.api + path,
    }
  }
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
plugins
env.ts

With this added, we’ll now be able to access our API variable anywhere in our Nuxt project with the following line:

const { $api } = useNuxtApp()

Signing Up

Since form submissions are initiated on the client side of Nuxt instead of the server, they’re rather straightforward. They’ll automatically pass along our session cookie so the server automatically knows who sent the request.

For brevity, we’ve already set up the forms for this project.

// pages/auth/sign-up.vue

<script setup>
  import useForm from '~/utilities/form'

  const toast = useToast()
  const { $api } = useNuxtApp()
  const form = useForm({
    email: '',
    password: '',
  }, toast)

  const signUp = async () => {
    await form.value.post($api('/auth/sign-up'))
    toast.add({ title: 'Thanks for joining!', timeout: 6000 })
    navigateTo({ path: '/' })
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Here we’re utilizing our useForm helper. This behaves similarly to InertiaJS’s useForm helper if you’ve used it. All data within it is reactive, and it houses an API layer as well as our form’s data.

Within our signUp method, all we need to do is post out to our API’s /auth/sign-up endpoint. Once completed the response will send back our updated session cookie with our authenticated user attached. So, we’re good to forward along to the home page.

Logging In

Logging in will be the same process as signing up, just submit the form and our API will take care of authenticating our user and updating our session.

// pages/auth/sign-in.vue

<script setup>
  import useForm from '~/utilities/form'

  const toast = useToast()
  const { $api } = useNuxtApp()
  const form = useForm({
    uid: '',
    password: '',
    rememberMe: false
  }, toast)

  const signIn = async () => {
    await form.value.post($api('/auth/sign-in'))
    toast.add({ title: 'Welcome back!', timeout: 6000 })
    navigateTo({ path: '/' })
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Fetching Our Logged In User

Now it’s time to fetch our authenticated user, putting our flow to the test. Within our home page, let’s update our script to the following.

Fetching Without Session

<script setup>
  import useForm from '~/utilities/form'

  const toast = useToast()
  const { $api } = useNuxtApp()

  const user = null
  const { data: user } = await useFetch($api('/auth'))

  const logoutForm = useForm({}, toast)
  const logout = async () => {
    await logoutForm.value.post($api('/auth/sign-out'))
    toast.add({ title: 'You have been logged out', timeout: 6000 })
    user.value = null
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
pages
index.vue

Now, I knowingly have this incorrect so that we can see why this doesn’t work. Our API call will go out to our /auth endpoint, however, the call won’t find our authenticated user for a couple of reasons.

1. We’re not including credentials with our fetch call

2. If this were to send on the server-side our session won’t be passed along at all.

So go ahead and give the above a test and see what happens for yourself. The page should load just fine, but it will appear as though the user is not logged in.

Fetching With Session

Now, let’s fix our above implementation. First, let’s fix the server-side call so that it’ll include our session.

For this, Nuxt provides a convenient helper that will pluck the cookies off the Nuxt Server’s request and proxy it to our API’s request to our AdonisJS server.

const headers = useRequestHeaders(['cookie'])
const { data: user } = await useFetch($api('/auth'), { headers })

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

With this, if we refresh our page, we’ll start getting our user loaded in. However, if we were to traverse on the client side from page to page in our application, the user would not load in. This is because we’re not passing the credentials from the browser on the client side. To fix that, all we need to do is add credentials: 'include' to our fetch config.

const headers = useRequestHeaders(['cookie'])
const { data: user } = await useFetch($api('/auth'), { headers, credentials: 'include' })

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Now our user should get successfully fetched on both the Nuxt server and client.

That’s it! For any API calls where you need your user to be authenticated, just be sure to pass along the headers and credentials and your authentication will automatically apply, no worrying about tokens or expirations and your Nuxt app can be as oblivious to your authentication system as you desire.

From here, if you wish, you could add a Pinia store to store your user’s details, and a Nuxt middleware to check the authentication and populate the user on each request.