Any authentication examples or tutorial(s) out there?

[zacharygcook]

Hi, this is a "help wanted" type of post.

Has anyone been able to find an authentication tutorial out there based on react-native-router-flux v4? Or an example, perhaps from an open-source project, of someone implementing authentication with react-native-router-flux that would be helpful to learn from?

I have not been able to find one anywhere. Given no tutorial, and no RN-router-flux docs on authentication it puts a lot on the developer to architect their own solution for authentication. Tough for me since I'm brand new to react-native / mobile development.

Please help! Thanks 1000x

[mcabs3]

@zacharygcook what type of auth are you trying to accomplish. This library is a router and isn't really supposed to handle authentication logic. In my production apps, I have a root component, like a loading screen or splash screen that will wait for my app to load and can look to see if a user is in memory, and then if yay or nay, will call Actions.whatever() to direct accordingly. Typically I have been following the idea of having a <Scene key='authenticated'> that has anything that requires a user authenticated in there.

I'll do my best to help you, however I think I will need more context.

[zacharygcook]

I just want to know a good way to check that the user is authenticated (from a route navigation perspective) using react-native-router-flux v4.

For example, a recommendation on how to use onEnter in combination with the and components to check their authentication status before showing protected routes.

The creator must have some good ideas on how to handle it as in the main README he mentions:

Combining onEnter, onExit, success, and failure makes patterns like authentication, data validation, and conditional transitions simple and intuitive.

Basically a recommended pattern that would work. I'm asking if there is an example or tutorial anywhere like that on the internet for me to follow for my first app?

[zacharygcook]

Not someone actually telling me how to check, via localStorage or whatever, how to check if the user is logged in, but a recommended way (from anyone) on how to handle the very basic routing for a rudimentary / barebones mobile app that has authentication.

An example answer (though totally wrong cuz obviously I don't know how to do it) would be something like this:

function isLoggedIn() {
   if (isAuth === true) {
        // what to do?
   } else {
        // call failure somehow?
   }
 }

function doSuccess() {
   // IDK
}

function doFailure() {
   // IDK
}

<Stack key="root">
    <Scene key="login" component={LoginScreen} />

    <Scene key="homepage" component={HomeScreen} onEnter={isLoggedIn}
          onSuccess={doSuccess} onFailure={doFailure} component{HomeScreen} >

</Stack>

So not telling me how to do the step where authentication is actually checked (from local storage or something) but an example / tutorial for the rest of it.

Haven't found anything like that anywhere for react-native-router-flux. Previously I have been able to find such a tutorial or example in other front-end frameworks.

[zacharygcook]

@mcabs3 does that help? Doing my best to give you context..

[zacharygcook]

Btw if I do figure out a good solution that everyone approves I'll gladly do a pull request and try to add it to the Example project! Could help other noobs after me :)

And I'm going to figure it out one way or the other, just started working on this about 24 hrs ago. I'll let you know the way I do end up implementing it. Its just likely my implementation will be suboptimal given how little I know about RN-router-flux, React Navigation, and react-native in general. This is my first react-native mobile app project ever.

[mcabs3]

Since you are trying to accomplish some sort of authentication, you are going to have to be able to pass the "user" context between screens, because of that I would assume you would be implementing some sort of design pattern with redux or mobx.

If my assumptions are correct, what I would do is create a routing action that accepts a destination route, and if there is no user in the store, handle accordingly.

For example dispatch(authenticate('dashboard', 'login')) and that could check the user, and take you to dashboard, or login if there is not a user in the store.

The issue with binding the auth logic to the routes in JSX is that you are relying on the router to pass things like user context and other data for you between scenes, and currently it doesn't do that. It would be to your benefit to have that logic outside the router, incase you ever needed to switch routers or adjust logic.

Sorry, I know that doesn't answer your question entirely. I just want to express my opinion, and hopefully show you an alternative route that would cause less headache.

[aksonov]

@zacharygcook, @mcabs3 Duplicate of #2094. Check my comment there, I have good news!