This app illustrates how to use Passport with React and Express to sign users in with a username and password. Use this example as a starting point for your own web applications.
This app illustrates how to build a todo app with sign in functionality using
React, Express, Passport, and the passport-local
strategy.
This app is a JavaScript application with a backend, in which the UI executes in the browser while data management and persistence is handled by the server.
This app is built using React for the UI and React Router for routing. The backend is built using the Express web framework. Data is persisted to a SQLite database.
When a user first arrives at this app, they are prompted to sign in. The React app prompts the user for their username and password and makes an API call to authenticate with the backend. Once authenticated, a login session is established and maintained between the server and the user's browser with a cookie.
After signing in, the user can view, create, and edit todo items. Once again, interaction occurs via the React app, which makes API calls to fetch and modify data. The browser automatically includes the cookie set during login with each of these requests.
When the server receives a request, it authenticates the cookie and restores the login session, thus authenticating the user. It then accesses or stores records in the database associated with the authenticated user.
This app conforms with the TodoMVC specification,
with two notable exceptions. First, it adds a user login and registration
system to the app. Second, it persists data remotely rather than in
localStorage. Remote storage is accessed via an API that conforms with
Todo-Backend, which is also extended to support
authentication.
Created by Jared Hanson