Git Product home page Git Product logo

authentication-in-react-apps's Introduction

Authentication in React Applications

The source code for a two-part tutorial for beginners who want to start to build applications using React and add an authentication layer to it. It was written for my blog, https://vladimirponomarev.com.

Parts of the tutorial

  1. Creating Components - in this part, we will create a basic application server, learn to bundle scripts using Webpack, get acquainted with basics of React (components, JSX syntax, props, states).
  2. Authentication Using JSON Web Token (JWT) - in this part, we will continue to improve the application and add authentication to it.

Screenshot

Authentication in React Applications

authentication-in-react-apps's People

Contributors

vladimirponomarev avatar zhouzhongyuan avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

authentication-in-react-apps's Issues

Server-side?

Thanks for the tutorial, but have you attempted to implement this within a server-side rendering react app? because localStorage doesn't exist on the server we hit problems.

basically, (as i'm using React-Router-v4) my step step is to only call Auth.isUserAuthenticated() on componentDidMount. Once I get this working I will spend more time thinking about how to get this done properly.

Have you put any thought to SSR already?

Direct URL to auth pages doesn't work

Hey,

first of all thank you for this tutorial - very helpful.
One question tho, using this code if i go directly to http://localhost:3000/login , instead of going to '/' and then click on the topbar option - we get 404 since don't have this route on the server side.

One way to solve it is to move everything to server side rendering but i would like to avoid it.
What would be the best way to solve this ? while keeping keep rendering on the client side

Thanks.

Connecting to React

I am implementing same as mentioned in tutorial but when I refresh '/login' or '/signup' route it giving me 404 error file not found but it working when I am changing Route from Link

Token expiry does not remove token from localStorage

First off: excellent work!

The issue I'm seeing right now is when the token expires it is not removed from localStorage, and the "Log out" button remains active (should require user to log back in).

Consider calling deauthenticateUser() from modules/Auth.js if the token verification fails jwt.verify() to ensure consistency.

404 in part-2

When I run npm start in the part-2 directory, the web app starts up but doesn't show anything. The JS console shows

Failed to load resource: the server responded with a status of 404 (Not Found)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.