Adonis.js Router Intended URL

[devhammed]

Hello everyone!

I just ported another useful Laravel Redirector feature called "intended URL" to the Redirect class in Adonis.js Router.

An example scenario for this is when a user tries to visit an authenticated page, maybe from a deeplink or email notification, and they are redirected to the login route because they are not logged in. What will happen is that they will be redirected to whatever route the login controller method decides, which obviously means the user needs to start the whole process of opening their intended URL all over again.

Make sure you have enabled useAsyncLocalStorage in the config/app.ts file, and you have set up the Adonis Session package and then add the extension below to the app provider:

import type { ApplicationService } from '@adonisjs/core/types'
import { HttpContext, Redirect } from '@adonisjs/core/http'

declare module '@adonisjs/core/http' {
  export interface Redirect {
    /**
     * Create a new redirect response while putting the current URL in the session.
     */
    guest(path: string, statusCode?: number, headers?: Record<string, string>): void

    /**
     * Create a new redirect response to the previously intended location.
     */
    intended(path?: string, statusCode?: number, headers?: Record<string, string>): void

    /**
     * Get the "intended" URL from the session.
     */
    getIntendedUrl(): string | null

    /**
     * Set the "intended" URL in the session.
     */
    setIntendedUrl(intendedUrl: string | null): this
  }
}

export default class AppProvider {
  constructor(protected app: ApplicationService) {}

  /**
   * Register bindings to the container
   */
  register() {
    //
  }

  /**
   * The container bindings have booted
   */
  async boot() {
    Redirect.prototype.guest = function (
      this: Redirect,
      path: string,
      statusCode: number = 302,
      headers = {}
    ) {
      const ctx = HttpContext.get()

      const intended = ctx?.request?.url(true)

      if (intended) {
        this.setIntendedUrl(intended)
      }

      Object.entries(headers).forEach(([key, value]) => {
        ctx?.response?.header(key, value)
      })

      return this.status(statusCode).toPath(path)
    }

    Redirect.prototype.intended = function (
      this: Redirect,
      path: string = '/',
      statusCode: number = 302,
      headers = {}
    ) {
      const ctx = HttpContext.get()

      const intendedUrl = ctx?.session?.pull('intended.url') ?? path

      Object.entries(headers).forEach(([key, value]) => {
        ctx?.response?.header(key, value)
      })

      return this.status(statusCode).toPath(intendedUrl)
    }

    Redirect.prototype.setIntendedUrl = function (this: Redirect, url: string) {
      const ctx = HttpContext.get()

      ctx?.session?.put('intended.url', url)

      return this
    }

    Redirect.prototype.getIntendedUrl = function (this: Redirect) {
      const ctx = HttpContext.get()

      return ctx?.session?.get('intended.url') ?? null
    }
  }

  /**
   * The application has been booted
   */
  async start() {
    //
  }

  /**
   * The process has been started
   */
  async ready() {
    //
  }

  /**
   * Preparing to shut down the app
   */
  async shutdown() {
    //
  }
}

Now, update the app/middleware/auth_middleware.ts contents with everything below:

import { errors as authErrors } from '@adonisjs/auth'
import type { Authenticators } from '@adonisjs/auth/types'
import type { HttpContext } from '@adonisjs/core/http'
import type { NextFn } from '@adonisjs/core/types/http'

/**
 * Auth middleware is used to authenticate HTTP requests and deny
 * access to unauthenticated users.
 */
export default class AuthMiddleware {
  /**
   * The route to redirect to when authentication fails
   */
  redirectTo = '/login'

  async handle(
    ctx: HttpContext,
    next: NextFn,
    options: {
      guards?: (keyof Authenticators)[]
    } = {}
  ) {
    try {
      await ctx.auth.authenticateUsing(options.guards)
    } catch (error) {
      if (error instanceof authErrors.E_UNAUTHORIZED_ACCESS) {
        return ctx.response.redirect().guest(this.redirectTo)
      }

      throw error
    }

    return next()
  }
}

Then, in your login controller, you can do something like this:

import User from '#models/user'
import { loginValidator } from '#validators/auth'
import type { HttpContext } from '@adonisjs/core/http'
import hash from '@adonisjs/core/services/hash'

export default class LoginController {
  async store({ request, response, session, auth }: HttpContext) {
    const { email, password, rememberMe } = await request.validateUsing(loginValidator)

    const user = await User.verifyCredentials(email, password)

    if (hash.needsReHash(user.password)) {
      user.password = password

      await user.save()
    }

    await auth.use('web').login(user, rememberMe)

    return response.redirect().intended('/dashboard')
  }

  async destroy({ response, auth }: HttpContext) {
    await auth.use('web').logout()

    return response.redirect('/login')
  }
}

And you are good to go!