https://github.com/sbotter/react-test

A React app built with TypeScript, emphasizing robust testing methodologies using ViTest, JestDom, HappyDom, and ViTest UI for comprehensive test coverage and reliable performance with seamless authentication integration powered by Auth0.
https://github.com/sbotter/react-test

auth0 reactjs typescript vitest vitest-ui

Last synced: about 2 months ago
JSON representation

A React app built with TypeScript, emphasizing robust testing methodologies using ViTest, JestDom, HappyDom, and ViTest UI for comprehensive test coverage and reliable performance with seamless authentication integration powered by Auth0.

• Host: GitHub
• URL: https://github.com/sbotter/react-test
• Owner: SBotter
• Created: 2024-03-03T22:37:51.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-03-04T03:49:25.000Z (11 months ago)
• Last Synced: 2024-12-06T08:06:02.130Z (about 2 months ago)
• Topics: auth0, reactjs, typescript, vitest, vitest-ui
• Language: TypeScript
• Homepage:
• Size: 198 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Testing React Apps

This is the starter project for my Reacting testing course where you'll learn everything you need to know to effectively test React apps. You can find the full course at: 

https://codewithmosh.com 

## About this Project 

This is a React app built with the following technologies and libraries: 

- Auth0 

- Tailwind 

- RadixUI

- React Router 

- React Query  

- Redux Toolkit 

Please follow these instructions carefully to setup this project on your machine. 

## Setting up Auth0 for Authentication

1. **Sign up for an Auth0 Account:**

   If you don't already have an Auth0 account, you can sign up for one at [https://auth0.com/](https://auth0.com/). Auth0 offers a free tier that you can use for your project.

2. **Create a New Application:**

   - Log in to your Auth0 account.

   - Go to the Auth0 Dashboard.

   - Click on "Applications" in the left sidebar.

   - Click the "Create Application" button.

   - Give your application a name (e.g., "My React App").

   - Select "Single Page Web Applications" as the application type.

3. **Configure Application Settings:**

   - On the application settings page, configure the following settings:

     - Allowed Callback URLs: `http://localhost:5173` 

     - Allowed Logout URLs: `http://localhost:5173` 

     - Allowed Web Origins: `http://localhost:5173`

   - Save the changes.

4. **Obtain Auth0 Domain and ClientID:**

   - On the application settings page, you will find your Auth0 Domain and Client ID near the top of the page.

   - Copy the Auth0 Domain (e.g., `your-auth0-domain.auth0.com`) and Client ID (e.g., `your-client-id`).

5. **Create a `.env.local` File:**

   - In the root directory of the project, you'll find a sample `.env` file. Make a copy and save it as `.env.local`.

   - Replace the Auth0 Domain and Client ID with the actual values you obtained from Auth0.

## Running the App

Now that you have set up Auth0 and configured your environment variables, you can run the React app using the following commands:

```bash

# Install dependencies

npm install

# Start the development server

npm start

```

This will start the back-end process at `http://localhost:3000`. If port 3000 is in use on your machine, update the port number in the following files and run `npm start` again: 

- json-server.json

- src/main.tsx