fusionauth / fusionauth-nodejs-react-example

FusionAuth Example for Node.js and React

This repo is out of date and is archived. Check out an updated tutorial on using FusionAuth with React or the updated GitHub repository.

(ARCHIVED) FusionAuth NodeJS and React Example

This project contains an example project that illustrates using FusionAuth with NodeJS and React. The Node and React applications each have their own Readme with further explanations of the applications, including configuration options. Each application also has examples of how to deploy it view Jenkins, Gitlab, or Drone.

About

The application uses the core features a person would want to use from software like FusionAuth. In order to do that, the Todo example includes routing to make all of these items happen. Included features are:

• Signup / login.
  • Email verification before logging in is allowed.
• Forgot password workflow.
• View / edit profile details.
• Enable / disable 2FA.
• Change password while logged in.
• Working with a MongoDB model (Todos) with a logged in user.
  • Create, read, update, delete Todos.
• Authentication of a route before allowing access to the page.

Prerequisites

You will need the following things properly installed on your computer.

• Git
• Node.js (with NPM)

Installation

• git clone https://github.com/fusionauth/fusionauth-nodejs-react-example
• cd fusionauth-nodejs-react-example
• ./server npm install
• ./frontend npm install

FusionAuth and Database Configuration

• Choose your preferred installation method.
  • This demo will cover the Fast Path option as a quick way to get up and running.
• Install the dependencies for your Operating System (this will do it in the current directory).
  • MacOS
    • sh -c "curl -fsSL https://raw.githubusercontent.com/FusionAuth/fusionauth-install/master/install.sh | sh"
  • Windows
    • iex (new-object net.webclient).downloadstring('https://raw.githubusercontent.com/FusionAuth/fusionauth-install/master/install.ps1)
  • Linux (zip)
    • sh -c "curl -fsSL https://raw.githubusercontent.com/FusionAuth/fusionauth-install/master/install.sh | sh -s - -z"
  • Linux (DEB or RPM)
    • sh -c "curl -fsSL https://raw.githubusercontent.com/FusionAuth/fusionauth-install/master/install.sh | sh"
• Start the FusionAuth App.
  • ./fusionauth/bin/startup.sh
    • The installer will also give the full path to the startup file.
• Ensure MySQL is up and running with a root user.
• Create a MongoDB database. We'll use a free tier from MongoDB Cloud.
  • Sign in and create a new Project.
  • Create a cluster on the new project. Choose a name and click create. You don't need to add additional team members.
  • Create a new Cluster for the project. Each project can support one free cluster.
    • If the cluster being created is the first for the project, you have the choice of using a starter cluster which is free. Choose that. You can name the cluster or accept the default name of Cluster0.
  • On the Network Access tab, add a new IP to be able to access the cluster.
    • Either add your own IP, or add 0.0.0.0.
  • On the Database Access tab, create a new user demo with the role Read and Write any database.
    • Set a password (demoPass).
  • Once the cluster is provisioned, click the Clusters tab. Then click Connect followed by Connect your application. The default language is NodeJS. Copy the connection string.
    • Connection string is in the format mongodb+srv://cookbook:<password>@something.mongodb.net/test?retryWrites=true&w=majority
    • You will want the portion of the URL between the @ and /test -> something.mongodb.net
• Open http://localhost:9011 in your browser to set up FusionAuth.
  • You can leave the defaults for all the options, but you will need to provide the root MySQL or PostgreSQL username and password.
  • The next page asks for information to create a FusionAuth admin account.

Running / Development

• ./server npm start
  • Debug mode ./server node --inspect server.js
• ./frontend npm start
  • This should open a browser to http://localhost:3000.

App Configuration

Details for how to configure each application (Node / React) will be detailed in their respective folders. This section will go over how to get everything set up as information may be required by both applications.

• Create an application in FusionAuth.
  • Give it a name (FusionAuth Demo).
  • Add a role of member and check on the Default box for that role.
  • On the JWT tab, click the Enable button.
  • On the Security tab, click the Allow refresh token button and uncheck the Require an API key button.
  • Save.
  • Grab the Application ID for the new application.
  • Grab the Application Secret for the new application.
• Create an API key.
  • Give it a description and do not click any of the buttons. This will be a root key for demo purposes.
  • Grab the ID of the API key.
• Enable emails
  • Settings -> Tenants (Default) -> Email
  • Use the appropriate settings for your email host.
  • Click the Verify Email button.
  • Use the Email Verification for the Verification Template.
• Replace the Email Verification and Forgot Password Verification email templates with the HTML provided.
  • In the email templates, you will need to change Site Name to your site's name.
  • You will also need to change https://your-site.com/ to your own domain.
  • You will need to change the From Email in FusionAuth on both templates to the email used in the email setup.
• Add the required routing authentication to the MongoDB database.
  • Visit the cluster for the project you create @ MongoDB.
  • On the Clusters tab, click Collections.
  • Under the fusionAuthDemo database, click roles.
  • Click Insert Document.
  • Beside the VIEW text, click the blank looking button. This will be a free form editor.
  • Paste the content from mongodb/roles.json and click Insert.

fusionauth-nodejs-react-example's Issues

I've been trying to set up this example but can't seem to put up a server

Here is the error log, any idea what may be going wrong here?

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'start' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prestart', 'start', 'poststart' ]
5 info lifecycle [email protected]~prestart: [email protected]
6 info lifecycle [email protected]~start: [email protected]
7 verbose lifecycle [email protected]~start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/kszpirak/src/fusionauth-nodejs-react-example/server/node_modules/.bin:/Library/Frameworks/Python.framework/Versions/3.8/bin:/Library/Frameworks/Python.framework/Versions/3.6/bin:/Library/Frameworks/Python.framework/Versions/3.7/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/X11/bin
9 verbose lifecycle [email protected]~start: CWD: /Users/kszpirak/src/fusionauth-nodejs-react-example/server
10 silly lifecycle [email protected]~start: Args: [ '-c', 'node server.js' ]
11 silly lifecycle [email protected]~start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~start: Failed to exec start script
13 verbose stack Error: [email protected] start: `node server.js`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:305:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:305:20)
13 verbose stack     at maybeClose (internal/child_process.js:1028:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/kszpirak/src/fusionauth-nodejs-react-example/server
16 verbose Darwin 18.7.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"
18 verbose node v13.5.0
19 verbose npm  v6.13.4
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] start: `node server.js`
22 error Exit status 1
23 error Failed at the [email protected] start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

update readme to get it up and running

@engineertdog can you take a crack at updating the README to provide some instruction to get it up and running?

https://github.com/FusionAuth/fusionauth-nodejs-react-example/blob/master/TODO.md
Looks like the setup has changed with your PR.
Thanks.

Make it better

This library needs some work, the code was originally written for an IBM Cloud / Cloud Foundry example, and it has become crufty.

Work items:

• Update README with a work-able how-to
• Remove Cloud Foundry / IBM Cloud references
• Remove need for API key in the React code if being used, it may not be
• Remove need for public key in the Node code, use JWKS if possible with a JWT library
• Decide if we want to keep the native JavaScript in the React auth.js module, or use a FusionAuth client library
• Update node / react deps to be modern
• Use proper React idioms
• Update to use a recommended FusionAuth login workflow using HTTP only cookies such as this workflow: https://fusionauth.io/articles/logins/spa/oauth-authorization-code-grant-jwts-refresh-tokens-cookies
• Optionally code a workflow using the OAuth2 Authorization Code Grant