@gregory

I spent the afternoon making it work with react.

@inertiajs/react has a type called ResolvedComponent

(alias) type ResolvedComponent = ComponentType<any> & {
    layout?: LayoutComponent | LayoutComponent[] | LayoutFunction;
}
import ResolvedComponent

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

I imported ResolvedComponent and used it to type import.meta.glob in app.tsx and ssr.tsx. I then followed the code provided in the Inertia documentation to add a fallback to a default layout.

/// <reference path="../../adonisrc.ts" />
/// <reference path="../../config/inertia.ts" />

import '../css/app.css'
import { hydrateRoot } from 'react-dom/client'
import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
import { resolvePageComponent } from '@adonisjs/inertia/helpers'
import { ReactNode } from 'react'
import GuestLayout from '~/layouts/GuestLayout'

const appName = import.meta.env.VITE_APP_NAME || 'AdonisJS'

createInertiaApp({
  progress: { color: '#5468FF' },

  title: (title) => `${title} - ${appName}`,

  resolve: async (name) => {
    const page = await resolvePageComponent(
      `../pages/${name}.tsx`,
      import.meta.glob<{ default: ResolvedComponent }>('../pages/**/*.tsx')
    )

    page.default.layout =
      page.default.layout || ((page: ReactNode) => <GuestLayout children={page} />)

    return page
  },

  setup({ el, App, props }) {
    hydrateRoot(el, <App {...props} />)
  },
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

import ReactDOMServer from 'react-dom/server'
import { createInertiaApp, type ResolvedComponent } from '@inertiajs/react'
import GuestLayout from '~/layouts/GuestLayout'
import { ReactNode } from 'react'

export default function render(page: any) {
  return createInertiaApp({
    page,
    render: ReactDOMServer.renderToString,
    resolve: (name) => {
      const pages = import.meta.glob<{ default: ResolvedComponent }>('../pages/**/*.tsx', {
        eager: true,
      })
      const page = pages[`../pages/${name}.tsx`]

      page.default.layout =
        page.default.layout || ((page: ReactNode) => <GuestLayout children={page} />)

      return page
    },
    setup: ({ App, props }) => <App {...props} />,
  })
}

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

You can apply a layout of your choice to your pages like this:

import { ReactNode } from 'react'
import { RegisterForm } from '~/components/register-form'
import AuthLayout from '~/layouts/AuthLayout'

export default function Register() {
  return (
    <div className="flex min-h-svh w-full items-center justify-center p-6 md:p-10">
      <div className="w-full max-w-sm">
        <RegisterForm />
      </div>
    </div>
  )
}

Register.layout = (page: ReactNode) => <AuthLayout children={page} />

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
  

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!