User Registration with InertiaJS

When changing over routes to:

router.get('/register', [RegisterController, 'show']).as('register.show').use(middleware.guest())

I'm' getting Error: The import "#controllers/auth/register_controller" is not imported dynamically from start/routes.ts. You must use dynamic import to make it reloadable (HMR) with hot-hook.

is my register_controller.ts not setup or registered properly?

I can work around this, but not as clean as your walkthrough

router.get('/register', async (ctx) => { const { default: RegisterController } = await import('#controllers/auth/register_controller') return new RegisterController().show(ctx) }).as('register.show').use(middleware.guest())

Hello Tom,

I would like to implement email verification, but I’m not sure what I should do in the store method of the RegisterController.

I would like to show this message to the user after registration:

Verify your email

You need to verify your email to activate your account..

A verification link has been sent to your email address. Please check your inbox and click the link to verify your email.

The link is valid for the next 15 minutes.

If you don’t see the email, check your spam or junk folder.

Should I use return inertia.render('auth/email-verification') or return response.redirect().toRoute('email.verify.index')?

export default class RegisterController {
  async show({ inertia }: HttpContext) {
    return inertia.render('auth/register')
  }

  async store({ request, response, inertia }: HttpContext) {
    const payload = await request.validateUsing(registerValidator)
    const role = await Role.getBySlug('user')

    const user = await User.create({
      roleId: role.id,
      firstName: payload.firstName,
      lastName: payload.lastName,
      unconfirmedEmail: payload.email,
      password: payload.password,
    })

    const signedUrl = router
      .builder()
      .prefixUrl(env.get('BASE_URL'))
      .params({
        id: user.id,
      })
      .qs({
        email: encryption.encrypt(user.unconfirmedEmail, '15 minutes'),
      })
      .makeSigned('email.verify', {
        expiresIn: '15 minutes',
      })

    await mail.sendLater(new VerificationEmailNotification(user, signedUrl))

    // return response.redirect().toRoute('email.verify.index')
    // or
    // return inertia.render('auth/email-verification')
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

If I use inertia.render('auth/email-verification'), it will display my React page but remain on app_url/register.

router
  .get('/email/verify/:id', [EmailVerificationController, 'verify'])
  .as('email.verify')
  .use(middleware.guest())

export default class EmailVerificationController {
  async verify({ request, response }: HttpContext) {
    if (!request.hasValidSignature()) {
      return response.badRequest('Invalid or expired URL')
    }

    const email = encryption.decrypt(request.qs()['email'] ?? '')
    const id = request.param('id')
    const user = await User.findOrFail(id)

    if (email !== user.unconfirmedEmail) {
      return response.badRequest('Invalid or expired URL')
    }

    user.status = UserStatus.ACTIVE
    user.email = user.unconfirmedEmail
    user.unconfirmedEmail = null
    user.verifiedAt = DateTime.now()
    await user.save()

    console.log(user)
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

If I use return response.redirect().toRoute('email.verify.index'), it will redirect to app_url/email/verify/sent. This mean I will need to declare two routes instead of one.

router
  .get('/email/verify/sent', [EmailVerificationController, 'index'])
  .as('email.verify.index')
  .use(middleware.guest())
router
  .get('/email/verify/:id', [EmailVerificationController, 'verify'])
  .as('email.verify')
  .use(middleware.guest())

export default class EmailVerificationController {
  async index({ inertia }: HttpContext) {
    return inertia.render('auth/email-verification')
  }

  async verify({ request, response }: HttpContext) {
    // logic here
  }
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

Hi! I'm trying to add a new confirmPassword field only for validation purposes; it has no effect on the user model.

Everything looks good until creating the user model because the user model does not have a confirmPassword field.

Is there any way to omit a value from the validateUsing function?

I followed this approach, but I'm not sure if it's the best one:

import User from '#models/user'
import { registerValidator } from '#validators/auth'
import { inject } from '@adonisjs/core'
import { HttpContext } from '@adonisjs/core/http'
import { Infer } from '@vinejs/vine/types'

type Params = {
  data: Infer<typeof registerValidator>
}

@inject()
export default class WebRegister {
  constructor(protected ctx: HttpContext) {}

  async handle({ data }: Params) {
    const { confirmPassword, ...userData } = data

    const user = await User.create(userData)

    await this.ctx?.auth.use('web').login(user)

    return { user }
  }
}

  

    

      Copied!