Ignite: Authentication Example

[leesolway]

Ignite has some awesome examples but one thing missing for me is how to manage login (auth) flow. It would be great to see examples built using this project template.

Some of the common problems i have faced in most apps include:

• Auth token is stored but how is it used for API requests
• How to route when a user is not logged in
• How to manage the refresh token e.g. when to fire it, how to buffer the request etc.

This request may be out of scope, i just feel these are very common tasks that could be shown and very helpful.

[skellock]

@derekgreenberg will be putting together a post/guide for us!

[vtoupet]

Hi @skellock @derekgreenberg,

When do you expect to have this post/guide ready?

[skellock]

I'm not sure. It's certainly a popular question.

[GantMan]

@derekgreenberg ping

[WorldWideWebb]

bump

[skellock]

kapow

[vesper8]

want this too! would be especially nice if there was an example using jwt.. something like this
https://github.com/joshgeller/react-native-jwt

[tmaly1980]

@skellock , I'm assuming you mean: https://github.com/infinitered/ignite-example-login ? Can this be linked to in the main ignite codebase, so people know about it?

In case anyone else is interested, I found three tutorials that each had something useful in them that might help as a whole, even though none of them are really integrated with ignite (one does use axios, though).

http://blog.slatepeak.com/build-a-react-redux-app-with-json-web-token-jwt-authentication/
https://www.theodo.fr/blog/2017/03/how-to-create-an-authentication-system-and-a-persistent-user-session-with-react-native/
https://medium.com/@alexmngn/the-essential-boilerplate-to-authenticate-users-on-your-react-native-app-f7a8e0e04a42

The first one has a higher order component that allows for "protected" screens and "public" screens so the user is prompted for a login if they are trying to access protected content (and not signed in), and if not wrapped, then don't try to authenticate. I'm not 100% sure how this would integrate yet with react-native-navigation.

The third one uses setTimeout to refresh the tokens so the server won't ever complain about an expired token. In the past, I had a very complicated wrapper around fetch() to handle expired tokens and try again. This setTimeout way makes that entirely unnecessary.

[tmaly1980]

@skellock , @derekgreenberg is this example done? I've looked through ignite-example-login and that doesn't seem to have anything that handles JWT tokens (storing, adding to headers, refreshing), for example.

[vesper8]

it would be so great if you could update the example to use the 2.0 release and if it included an example with JWT that would be amaaaaaaziiing!!

[tmaly1980]

One thing that also needs to be considered is if the server end returns a JWT-related auth error (ie invalid token), there should be something globally at the api level to handle this, rather than have code in each/every saga action. There easily could be a situation where if the server says the JWT token is invalid, you want to display a login screen (whether via changed component state or navigating to the login screen).

[trda]

I dare say 2.0 release doesn't include it, too ?

[ruddell]

@trda In my Ignite JHipster boilerplate, I have a JWT authentication option. It usually expects a JHipster server backend, but the logic should still apply. Just a quick summary of how it works:

Link to sample app repo: https://github.com/ruddell/IgniteJhipsterSampleApp

• StartupSagas loads the token from AsyncStorage if present
  
  
  
  • If token is present, gets account information and sets API auth header
  
  
• DrawerContent shows different options based on authentication
  
  
  
  • If not authenticated, show links to Login, Register, Forgot PW
  
  
  • If authenticated, show links to Settings, Logout
  
  
• LoginScreen contains the login form (from Ignite v1)
• Sagas/index.js links LoginRedux actions to LoginSagas
• LoginSagas.login calls the API endpoint which returns a JWT token if credentials are valid
  This token is added as a header in Api.js
• Any sagas calling APIs that require authentication are wrapped in the CallApi saga that will show the login screen if a 401 error happens (token expired)
  
  
  
  • If not re-authenticated, cancel the request
  
  
  • If re-authenticated, retry the request with the new JWT Token
  
  
  • I got this concept from this apisauce issue.
  
  

[vzpintor]

Somebody has an example from authentication flow with ignite bowser, I'm try to use this flow https://reactnavigation.org/docs/en/auth-flow.html but, not working it.

I'm relative new using ignite and I don't have much idea that how can I it

Please somebody that help me