Build a Health Tracking App with React, GraphQL, and User Authentication

Build a secure React application: Combining GraphQL, TypeORM, Node.js and Okta

This article will guide you how to build a secure GraphQL API using the Vesper framework, TypeORM, MySQL, and Node.js, and create a client that interacts with it using React, reactstrap, and Apollo Client. We will focus on secure user authentication and simplify identity management with Okta.

This article was originally published on the Okta Developer Blog. Thanks to the partners who support SitePoint as a possible one.

We will create a health tracking application for recording daily health data.

Why choose Okta?

Okta is a cloud service that simplifies identity management and makes it safer and easier to scale. It allows you to:

• Certified and authorized users
• Storing user data
• Execute password-based and social login
• Protect your application with multi-factor authentication
• More features! Please check our product documentation.

Register an Okta permanently free developer account and continue to learn how to build a secure React application!

Why choose the health tracking app?

I had a 21-day sugar-free detoxification period from September to mid-October 2014, and stopped eating sugar, started regular exercise, and stopped drinking. I had high blood pressure for more than a decade and was taking antihypertensive medications at the time. In the first week of detoxification, I used up my blood pressure medicine. Since the new prescription requires a doctor's visit, I decided to wait until the detox is over before going to see the doctor. Three weeks later, not only did I lose 15 pounds, but my blood pressure returned to normal levels!

I created a 21-point system to track my health. The rules are simple:

1. Get one point for healthy diet. Otherwise, no points will be awarded.
2. Get one point for exercise.
3. Get a point without drinking.

I built 21-Points Health to track my health. Now, we will create a simplified version that tracks only daily points.

Build API with TypeORM, GraphQL and Vesper

TypeORM is a flexible ORM framework that runs on most JavaScript platforms. Global installation of TypeORM:

npm i -g typeorm@0.2.7

Create a directory to store React client and GraphQL API:

mkdir health-tracker
cd health-tracker

Create a new MySQL project using the following command:

typeorm init --name graphql-api --database mysql

Editgraphql-api/ormconfig.jsonCustomize username, password, and database.

Install MySQL (if not already installed).

Navigate to your graphql-api project, install the project's dependencies, and then launch it to make sure you can connect to MySQL.

cd graphql-api
npm i
npm start

Install Vesper to integrate TypeORM and GraphQL

npm i vesper@0.1.9

Create GraphQL models and controllers.

Create entity

Modify src/entity/User.ts and src/entity/Points.ts to allow the points to be associated with the user.

Create a controller

Create src/controller/PointsController.ts to handle GraphQL queries and mutations.

Modify src/index.ts to use Vesper's bootstrap() to configure everything.

Start the API and test queries and mutations using GraphQL Playground.

Repair date

Install graphql-iso-date and configure a custom parser to process dates.

Get Started to Use React

Create React client using Create React App and install the necessary dependencies:

npm i -g typeorm@0.2.7

Configure Apollo Client

Configure the Apollo Client to connect to your GraphQL API.

Using ApolloProvider and Query components

Modify react-client/src/App.js to use the ApolloProvider and Query components.

Add OpenID Connect Authentication for React

Create an OIDC application in Okta and install Okta's React SDK and react-router-dom:

mkdir health-tracker
cd health-tracker

Configure routing and authentication

Modify react-client/src/App.js to set up Okta authentication.

Create component

Create Home.js, Login.js and Points.js components.

Install reactstrap and Bootstrap

Install reactstrap and Bootstrap and add Bootstrap's CSS file.

Using Okta Sign-In Widget

Installing Okta Sign-In Widget:

typeorm init --name graphql-api --database mysql

Create OktaSignInWidget.jsComponent.

Create Points.jsComponent

Get user information from JWT

Install Okta's JWT Verifier:

cd graphql-api
npm i
npm start

Create graphql-api/src/CurrentUser.ts.

Configure JWT Verifier

Modify graphql-api/src/index.ts to configure the JWT validator.

Modify the controller

Modify graphql-api/src/controller/PointsController.ts to inject CurrentUser and filter the user ID.

Restart the API and test the application.

Conclusion

This article demonstrates how to build a secure React application using GraphQL, TypeORM, and Node.js. Please check out other resources provided by Okta to learn more about React, Node, and user authentication.

Remember to replace the placeholders {yourOktaDomain} and {clientId} for your actual Okta domain name and client ID. Please refer to the original text for the source code link.

The above is the detailed content of Build a Health Tracking App with React, GraphQL, and User Authentication. For more information, please follow other related articles on the PHP Chinese website!