Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing Authentication In Your React/React...

Implementing Authentication In Your React/React Native Apps

Otemuyiwa Prosper

May 06, 2017
Tweet

More Decks by Otemuyiwa Prosper

Other Decks in Programming

Transcript

  1. Who Am I? ❖ Software Developer ❖ Consultant at Auth0

    ❖ Open Sourcerer ❖ Self-Acclaimed Developer Evangelist ❖ Community Builder ❖ Jollof Rice Ambassador ❖ Google Developer Expert @unicodeveloper
  2. ❖ One does not simply implement Authentication. ❖ Again, one

    does not simply implement Authentication. ❖ Once Again, one does not simply implement Authentication.
  3. Traditional Authentication - How it Works Challenge 2 ❖ A

    user submits some credentials ❖ The credentials are checked against a database ❖ If the credentials are valid, a session is created for the user on the server. The session can be stored in files, a database, a cache store like Redis, et.c. ❖ A cookie with a session_id is sent back to the browser. ❖ Subsequent HTTP requests to the server carries the cookie. So, it’s verified against the session every time.
  4. Traditional Authentication - How it Works Challenge 2 ❖ Once

    the cookie is deleted, the application logs me out.
  5. Modern Architecture - How? What? ❖ John Doe, decouple all

    the things! ❖ Microservices everywhere. ❖ Backend exists as a REST API and they are stateless. ❖ Frontend exists as a Single Page Application (SPA) ❖ Mobile app needs to consume the REST API. ❖ Easy Scalability is needed. Using React === Building SPAs
  6. JWT Authentication - How it Works Challenge 2 ❖ A

    user submits some credentials ❖ The credentials are checked against a database ❖ If the credentials are valid, a token is created, signed for the user and returned to the client in the response. ❖ The token is saved on the client. ❖ Subsequent HTTP requests to the server carries the token as an Authorization header. ❖ The backend receives the token and verifies it against a secret on the server. ❖ If the token is valid, the requested resource is returned else a 401 status code is returned.
  7. Implementation - LoginComponent Challenge 2 ❖ Grab the user details

    from the Login form ❖ Make a post request using axios or any http library to the backend API ❖ Backend API actually returns two tokens, an id_token and an access_token. ❖ Store both tokens in Local Storage.
  8. Implementation - Backend API Challenge 2 ❖ Create a signed

    id_token from the user’s details. ❖ Create a signed access_token from the user’s details.
  9. Implementation - Why do we have two tokens? Challenge 2

    ❖ Why do we have an id_token & an access_token? An id_token’s purpose is to authenticate the user to the client. An access_token’s purpose is to inform the API that the bearer of this token has been authorized to access the API and perform specific actions (as specified by the scope that has been granted). https://auth0.com/blog/why-should-use-accesstokens-to-secure-an-api/
  10. Client Session - Staying Authenticated. Challenge 2 ❖ We are

    using a stateless authentication mechanism. ❖ How do we ensure the user stays authenticated? ❖ An expiry date is attached to the tokens. If the JWT is expired, the user shouldn’t be logged in or able to access any protected resource. ❖ If the token expires, log the user out and redirect to the login route.
  11. Protecting Routes and Resources Challenge 2 ❖ Authentication is mainly

    added to a system to restrict resource access to users who have proven they are allowed to access those resources. ❖ Your app can be publicly accessible ❖ Your app can be limited to authenticated users. ❖ Your app can be limited to a subset of authenticated users. ❖ We can create routes for resources that require an authentication check. ❖ To pass the check, a valid JWT must be present. ❖ When making HTTP requests, we can send the JWT as an Authorization header. ❖ If the JWT is valid, the resource will be accessible.
  12. Protecting Routes and Resources - Frontend Challenge 2 ❖ Use

    the onEnter attribute of the Route path.
  13. Things to Note Challenge 2 ❖ Always serve your app

    and API over HTTPS ❖ Cross Site Request Forgery Attacks if using cookies ❖ Cross Site Scripting (XSS) if using local storage. ❖ Always escape user input and put CSRF protection in place.
  14. Auth0 & Firebase can handle your Authentication easily Challenge 2

    ❖ Social Authentication with many Providers - Facebook, Twitter, Google, LinkedIn etc ❖ Email and Password Authentication ❖ Single Sign On ❖ https://auth0.com/blog/reactjs-authentication-tutorial/ ❖ https://www.youtube.com/watch?v=mwNATxfUsgI ❖ https://auth0.com/blog/adding-authentication-to-react-native-using-jwt/ ❖ https://www.sitepoint.com/authentication-in-react-native-with-firebase/