The first time I built a Laravel React app, most of my time was spent simply building out the infrastructure related to authentication (login, registration, password reset, etc).

With a server rendered app, Laravel generates the authentication boilerplate for you. But with a 100% React frontend, all these pieces need to be built custom: an auth API (with JSON web tokens), routing, forms and form validation, persistent storage, and tests. There’s also aren’t many tutorials or example projects that show how it all works together.

Example To-Do App

Now that I’m more familiar with these concepts, I’ve released an example boilerplate for others to look at. You can view a demo of the Laravel React To Do App here. Source code and installation instructions are available on GitHub.

It includes:

• An auth API, using tymon/jwt-auth to manage the JSON Web Tokens.
• Routing with react-router (private, public and split routes).
• Feature tests.
• Database seeding.
• A base ApiController to help return standardized responses.
• Bootstrap for styling.

You can find the project on GitHub. Use it as a starting base for quick prototypes or to learn from. Suggestions, recommendations, and pull requests welcome!

How it Works

Here’s a video showing how to install the app and the basics of how it works. You can also read the installation documentation on GitHub.

Choices

JSON Web Tokens

Laravel Passport was another option for managing the JSON Web Tokens. I decided to use tymon/jwt-auth because I just wanted basic email and password authentication and jwt-auth seemed like the simplest library for that. But I would love to do an implementation of Passport at some point to understand how it works better.

Decoupled Front-end

If you prefer to scaffold your React apps with create-react-app and have the front-end completely decoupled from Laravel, you’ll just need to migrate the javascript (from resources/js) and package.json dependencies. The API will work with any client.

Bootstrap vs Other Frameworks

I used Bootstrap mainly because it was the Laravel default and most people are pretty familiar with it. However, at work I’ve been using Material UI for most projects and really enjoy it. If I was starting fresh, I would probably use that.

Credits

This project was heavily inspired by react-laravel-with-jwt-auth, which I learned a lot from.