Setup proxies in Nuxt for Laravel Sanctum

Laravel Sanctum is a great package for authenticating users in a Laravel application. It's easy to setup and use, but it has one big issue. It doesn't work well with CORS.

CORS stands for Cross-Origin Resource Sharing and it's a mechanism that allows a server to indicate any other origins (domain, scheme, or port) than its own from which a browser should permit loading of resources. It is a great tool for security, but it can be a pain to work with.

This means that if you have a Laravel application running on https://example.com and you want to make an API request to https://api.example.com you will get a CORS error.

This is a big issue if you want to use Laravel Sanctum to authenticate users in a Nuxt application. Nuxt runs on http://localhost:3000 in development and on https://example.com in production. This means that you will get a CORS error when you try to authenticate a user in development.

Setup proxies

The solution to this problem is to setup proxies in Nuxt. Proxies allow you to proxy requests to a different URL. This means that you can proxy requests to https://api.example.com to http://localhost:3000 in development.

This way you can make requests to http://localhost:3000 in development and https://api.example.com in production.

To setup proxies in Nuxt you need to edit nuxt.config.ts file in the root of your project. This file is used to configure your Nuxt application.

In this file you need to add a nitro.devProxy property.

export default defineNuxtConfig({
    nitro: {
        devProxy: {
            "/proxy": process.env.NUXT_PUBLIC_API_BASE,
        },
    },
})

This will proxy all requests to http://localhost:3000 that start with /proxy. So if you make a request to /proxy/users it will be proxied to http://example.com/users.

Setup Laravel Sanctum

Now that you have setup proxies in Nuxt you need to setup Laravel Sanctum to work with proxies.

Sanctum already accepts requests for localhost:3000 so there is no need to change anything. But if you are using a different port in your Nuxt application you need to add it to the SANCTUM_STATEFUL_DOMAINS environment variable in your Laravel application.

To do this you need to add the URL of your Nuxt application to the SANCTUM_STATEFUL_DOMAINS environment variable in your Laravel application.

SANCTUM_STATEFUL_DOMAINS=localhost:5000

This will allow Laravel Sanctum to authenticate users from http://localhost:5000.

Setup Nuxt Auth Sanctum Module

If you are using the Nuxt Auth Sanctum Module you need to add the proxy property to the sanctum property in the auth property in your nuxt.config.ts file.

export default defineNuxtConfig({
    sanctum: {
        baseUrl: "http://localhost:3000", // the URL of your Nuxt application
        endpoints: {
            csrf: "/proxy/sanctum/csrf-cookie", // prefix with your proxy prefix
            login: "/proxy/login",
            logout: "/proxy/logout",
            user: "/proxy/api/user",
        },
    },
})

This will make sure that the Nuxt Auth Sanctum Module makes requests to the correct URL.

ERROR h3 unhandled unable to verify the first certificate

If you are getting the ERROR [h3] [unhandled] unable to verify the first certificate error when you request a proxied URL you will need to add changeOrigin: true to the devProxy property in your nuxt.config.ts file.

export default defineNuxtConfig({
    nitro: {
        devProxy: {
            "/proxy": {
                target: process.env.NUXT_PUBLIC_API_BASE,
                changeOrigin: true,
            },
        },
    },
})

Conclusion

That's it. You have now setup proxies in Nuxt for Laravel Sanctum. You can now make requests to http://localhost:3000 in development and https://api.example.com in production.