Inertia

Let's assume we have a Rails app with inertia-rails using React set up and rodauth-rails already installed. You just need to add the following to your config/application.rb:

# InertiaRails' middleware copies X-XSRF-TOKEN into X-CSRF-Token, which
# Rodauth's CSRF check relies on. Make sure it runs first, before Rodauth's
# middleware handles the request.
config.middleware.move_after InertiaRails::Middleware, Rodauth::Rails::Middleware

Now you can render Inertia components instead of HTML templates:

class RodauthMain < Rodauth::Rails::Auth
  configure do
    login_view { inertia_component("login", login: param(login_param)) }
  end

  private

  # Return form validation errors in format Inertia expects.
  def inertia_component(component, props = {})
    rails_render inertia: "rodauth/#{component}", props: { errors: @field_errors || {}, **props }
  end
end

An example login React component can look like this:

import { Form, Link } from '@inertiajs/react'

export default function Login({ login }) {
  return (
    <div className="max-w-sm mx-auto space-y-4">
      <h1 className="text-xl font-semibold">Login</h1>
      <Form action="/login" method="post" className="space-y-4">
        {({ processing, errors }) => (
          <>
            <div>
              <label className="block text-sm font-semibold">Email</label>
              <input
                type="email"
                name="email"
                defaultValue={login}
                className="mt-2 text-sm w-full px-3 py-2 border rounded-md border-gray-300"
                autoComplete="email"
              />
              {errors.email && <p className="mt-1 text-xs text-red-600">{errors.email}</p>}
            </div>
            <div>
              <label className="block text-sm font-semibold">Password</label>
              <input
                type="password"
                name="password"
                className="mt-2 text-sm w-full px-3 py-2 border rounded-md border-gray-300"
                autoComplete="current-password"
              />
              {errors.password && <p className="mt-1 text-xs text-red-600">{errors.password}</p>}
            </div>
            <button
              type="submit"
              disabled={processing}
              className="w-full px-8 py-3 font-semibold text-sm rounded-md text-white bg-blue-600 hover:bg-blue-700 disabled:opacity-50"
            >
              Login
            </button>
          </>
        )}
      </Form>
    </div>
  )
}

See rodauth-demo-inertia for full Rails example with components for features enabled by default.

JSON

If you want to serve JSON API alongside Inertia components, add this to your Rodauth configuration to differentiate JSON from Inertia requests:

class RodauthMain < Rodauth::Rails::Auth
  configure do
    # ...
    json_request? { super() && !rails_request.inertia? }
  end
end