how to handle unauthorized users

[tsdexter]

Hi Lee,

Was hoping to see your approach to handling/routing unauthorized users. For example:

• redirecting all (or a subset of) URLs to /login if they aren't already logged in
• making particular components require authentication (like an admin top bar)
• redirecting to /login on token expiry
• etc...

Any plans to include any of this in the example?

[leebenson]

No plans at this stage. The purpose of this example was mostly to outline one possible approach to how the communication between React and server could work, rather than create a full-blown auth module. I'm trying to impart the concepts, rather than the implementation.

With that said, if you look at https://github.com/reactql/example-auth/blob/master/src/components/user.js#L19, you can see that tackling 'unauthorised' users is possible by feeding in the session GraphQL query to component, and then simply reading if props.data.session.user has data. If it doesn't, they're not logged in.

You could use that as a basis for an <Authorized> component that checks for a loaded user, and sends back a <Redirect> from React Router if they're not loaded, or the child elements if they are. That'd allow you to use it like:

<Authorized>
  <StuffToShowWhenLoggedIn />
</Authorized>

... and <Authorized> would act as a HOC for redirecting to the login page if not authenticated.

[tsdexter]

Thanks @leebenson thats pretty similar to what I've implemented in a <CanAccess/> HOC in an existing ReactQL app. Just wanted to get a pros perspective.

[leebenson]

No prob. Sounds like you're on the right track.