4

Unable to find an exact answer to this on Google, I'm trying to integrate Laravel's authentication system with React so the user data is available on the frontend to my developer

In Laravel you can do things such as

Auth::user()->id

and I'd like that data to be available in the frontend (as well as code like the following)

Auth::check()

When a user logs in to the React App it sends the data to the backend, do I need him to send a request to the backend to check for logins and such? Will Auth::check() return true if they're logged in VIA the front end if we don't use the Laravel front end?

I'm a bit new to using Laravel as a backend only so I apologize if this question has an obvious answer

Thanks

  • Zach
5
  • Zach? did you see this: github.com/lijujohn13/react-laravel-auth ? Commented Mar 3, 2018 at 11:37
  • Or this: code.tutsplus.com/tutorials/… Commented Mar 3, 2018 at 11:38
  • Honestly, I don't really understand the question but it seems to me like you may be missing an important piece of the puzzle in your head. I think you should read up on what "being logged in" in laravel actually means. developer.mozilla.org/en-US/docs/Web/HTTP/Cookies Commented Mar 3, 2018 at 17:17
  • or laravel-passport Commented Dec 11, 2018 at 3:45
  • Hey, I still need the actual answer of this question. I've already checking all of them in google and still found nothing Commented Mar 4, 2019 at 9:52

1 Answer 1

5

If you're building a single page application with React and Laravel, the most common approach is to use Javascript Web Tokens (JWT) for API authentication.

Laravel doesn't come with API authentication methods our of the box. However, Laravel Passport (https://laravel.com/docs/master/passport) or other popular libraries like JWT Auth (https://github.com/tymondesigns/jwt-auth) provide this layer.

When using API authentication, the client (in this case a React frontend) sends the user's credentials to a login API endpoint when the user submits them. Laravel then authenticates the user, and returns a JWT (basically a long string) in the JSON response if the user authenticated successfully (along with any other information you might want to return, like the User Name for example).

That JWT token can then be saved into a cookie or local storage, and used for subsequent requests to the API (usually sent in the header). The API Auth library you've used (e.g. Passport) has methods that verify if the user is authenticated and provide the user object based on the JWT token that was provided.

When I was first learning this, it was really helpful to have a working example. I used https://github.com/lijujohn13/react-laravel-auth, which was mentioned by Ali M in the comments (thanks!). I also released my own example todo app (https://github.com/devinsays/laravel-react-bootstrap) that uses the jwt-auth library and also has tests for all the endpoints.

Sign up to request clarification or add additional context in comments.

2 Comments

I have read the link github.com/lijujohn13/react-laravel-auth. It is very basic, doesn't provide a real authentication using at least username-password. So your version is better. Now, I have to decide which strategy I will use : JWT only or Passport. I will try it.
Actually, in my current app, I use built-in authentication provided by Laravel (laravel.com/docs/5.7/authentication), because my API is not a stand-alone, it is a part of the whole app. The login form is created with blade (serve-side), not in the front end. But now, I am struggling to implement logout. If I implement login from at the client-side, it is easier to implement logout using React-Router's history and push. But this means, I have to implement authentication mechanism using either JWT or Passport which will take another effort and time.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.