Using ReactJS with Passport?

The routes have nothing to do with Vue. There are a couple of Vue components that get included with Passport to make your life easier. You'd have to rewrite those if you want that functionality as React components.

From your question I can't tell if you plan to build a React app inside of Laravel, say using Blade to mount your React app, or if you just want Laravel to be an API with something like Node running your app. Either way, Vue isn't required to make Passport work.

I understand that Vue is not required, however, Laravel is heavily built around it now. I wanted to know whether I could use Laravel Passport's use of encrypted cookies in an API with a ReactJS app running on node for example.

Bump!

@joshgallagher24 Laravel Passport documentation and Laracasts are somewhat misleading. Several people like Matt Stauffer even incorrectly assumed that CreateFreshApiToken middleware can even be used for building an SPA. It can't. It is just a hack that allows you to easily access Passport protected routes in javascript that is served by Laravel backend itself.

If you want to build a real-world ReactJS application with Laravel Passport, the only way currently is to use password grant. Single password grant client is created by default when you do passport:install. Here is the gist with example implementation using Redux and fetch API.

Note, however, that in the example above client_secret is exposed to end user. You should address this to prevent security issues down the line. There is no good solution to this problem. The one really simple idea I can think of is to add client_secret into request body on a backend via middleware. I've also seen some people use separate proxies that attach Oauth2 credentials to each request (but I haven't seen a really good implementation for this).

I'll appreciate if someone comes up with new ideas.

Sorry for the late reply... Uni work. I am still unsure about this area. Is there any updates that give us this type of functionality? Or can we only use vue and the createFreshApiToken still. Haven't touched on this in a while but getting back to work so any suggestions or help would be great.

can I use Passport with a ReactJS app

Passport is backend, React is frontend. I cant see why you couldnt use passport with react.

@pmall You can use it with the password grant, however, you have to share the client secret which removes the point of using OAuth2.0. This is why I was asking if anyone knows a way to get around this or if Passport offered functionality like this. BTW it does not.

@joshgallagher24 I also googled around this question a lot. I am planing to develop new project with React as separate app on different domain and Laravel as api backend. Previously with this approach I used https://github.com/dingo/api with Laravel 5.2 at backend.

With Laravel 5.3 I hoped, that I can switch to Passport package, but seems, that it doesn't provide clean way to make simple jwt token flow.

So I decided to use building out my auth with tymon/jwt-auth instead, and ignore Passport package :)

Links, that you can find useful: https://www.reddit.com/r/laravel/comments/53gqu2/consuming_my_own_api_with_laravel_passport/ https://www.reddit.com/r/laravel/comments/529tey/how_to_do_basic_jwt_auth_in_laravel_53/

You can make a request from react using a fetch library, like "isomorphic-fetch" and just set the "credentials: true". This will send the cookie along with the request and you won't need to authenticate yourself... The CreateFreshApiToken Middleware does the rest.

  let headers = {
      credentials: true,        // pass cookies, for authentication
      mode: 'cors',               // enable cross-origin requests
      method: method,
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    ...
}

The react code just needs to be in a rendered Laravel page in which the cookies are passed down to.

@dshields This works if you build your React in blade views? I want to build my SPA seperate and then consume my API with it.

@joshgallagher24 may I ask, what path did you choose in solving your original intent - Laravel as API service, React.js as SPA that is either "served" by totaly other app (say plain index.html) or served by Laravel template, however all session cookies in route middlewares disabled? or did you use Laravel to render template (meaning all session middlewares). thanks!

@kroko Now it's my turn to ask which way did you go?

@joshgallagher24 so bro ?? what you did ? please share with us some ideas and ways to do that :)

This thread is very old now, but I saw an email just now!

I usually use Lumen, but sometimes use Laravel. I use mostly JWT-Auth - I don't think Laravel Passport is as feature rich as I'd want it, to warrant me using it.

For the SPA, I use Nuxt.js or Vue.js SSR.

The new version of JWT-Auth conveniently comes with middleware that re-authenticates and responds with a valid token.

I am going to build an API starter kit that uses Lumen and Vue SSR and I'll stick it here when it's done.