implement auth with the Flux based router

[frankleng]

@koistya mind giving an example of how to setup an auth flow with the current setup?
One of the biggest perks of switching to react-router is the out of box support for auth by using nested routes. thanks! ref #21

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[frankleng]

ping @koistya
mind answering this one?

[koistya]

@frankleng I'm going to include auth flow example into this kit, hopefully next week.

[frankleng]

@koistya that'll be great if you have time this week. also with that said, it'll be nice to have a sample for simple redirects.
One of the pain points is debugging routes on the server side. Please let me know if you have any tips.

[cwshevlin]

@koistya I'm also trying to learn how to implement auth with React, would love an example.

[oliwerhelsen]

+1

[dqdinh]

The nuclearmail app (https://github.com/ianobermiller/nuclearmail) has a working example of auth using the Gmail REST API

[rosswilson]

@koistya An example of auth with react-router would be great, have you had any more look into this?

[alesma]

+1, i spent the whole sunday afternoon trying to get this running, trying to keep my code isomorphic and following the flux architecture without success. I believe this is a deal breaker for many, if anyone already have a working solution to share that would be really handy.

[koistya]

Here is an example of an alternative routing approach:

Implementing React.js routing from scratch (docs/recipe)

Where you can check authentication in several ways:

router.route('/store/checkout', async () => {
  if (!this.user.isAuthenticated) {
    this.throw(401, 'You must be authenticated.');
  } else {
    const data = await http.get('/api/cart/items');
    this.render(require('./components/Checkout'), data);
  }
});

router.route('/store/checkout', authorize('user'), async () => { ... });
/* where `authorize(..)` is just a regular route handler */

router.route('/store/*', async () => { /* check authentication via `this.user` */ })
router.route('/store/checkout', async () => { /* load data, return component to render */ });

[constantx]

@koistya the example code has import Router from './core/Router'; but there's no such file. Where can we find it?

[koistya]

@constantx fixed 'How to implement routing' recipe in 9891699

[constantx]

@koistya rad, will check it out

[constantx]

any tip on handling redirect? I'm having a hard time figuring out where to do it (in a store? action? component?)

[koistya]

@constantx one way is to use Location.navigateTo('/new-path')

[koistya]

Another way.. is to add this redirect logic to the router, I will try to do it later

[constantx]

@koistya rad, looking forward to it, thanks for all the hard work!

[lovegroveandy]

@koistya, awesome work thanks. I agree it would be great to have an auth example route in the kit.

[ACPK]

@koistya Would also love an auth example route.

[9mm]

+1

[DCKT]

Could be great ! +1

[gmlnchv]

@koistya Any progress on this? A working example of a basic auth workflow - token, cookie, user object handling, would be super beneficial for the kit!

[jaredpalmer]

I use express middleware to ensure authentication for API endpoints. I also use a higher level component to handle component by component permissions. It was a pain to implement this. Would love to see this project move to react router 1.0.

[Bogdaan]

@constantx @9mm @gmlnchv @lovegroveandy @ACPK
this is not a PR, but i pubish my fork with:

1. redirects (server and client)
2. authorization
3. altjs / flux ( stores, actions, Iso etc.)
   Just for example, and some basic features for personal project "out the box"
   see https://github.com/Bogdaan/react-auth-kit

[langpavel]

This is really old issue.
Feel free to reopen it if you think it may be useful for someone.