https://github.com/jacobhsu/react-auth0
https://github.com/jacobhsu/react-auth0
vercel
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jacobhsu/react-auth0
- Owner: JacobHsu
- Created: 2022-08-10T07:58:24.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-08-16T08:58:52.000Z (almost 4 years ago)
- Last Synced: 2025-03-17T05:45:03.295Z (over 1 year ago)
- Topics: vercel
- Language: JavaScript
- Homepage: https://react-auth0-theta.vercel.app
- Size: 194 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Auth0 React SDK Sample Application
[Add a Twitter Social Connection in ~10 Minutes With Auth0](https://www.youtube.com/watch?v=zj48buoJvX4)
[auth0-react-samples](https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01)
react-social-login > Settings
Allowed Callback URLs / Allowed Logout URLs / Allowed Web Origins
`http://localhost:3000, http://localhost:3001, http://localhost:5000`
## developers.facebook
[facebook-social-connection](https://marketplace.auth0.com/integrations/facebook-social-connection)
使用 JavaScript SDK 登入 `是`
Facebook登入 > 用戶端 OAuth 設定
有效的 OAuth 重新導向 URI `https://jacobhsu.us.auth0.com/login/callback`
JavaScript SDK 允許的網域 `https://jacobhsu.us.auth0.com`
## developer.twitter
User authentication settings > `OAuth 1.0a`
Callback URI `https://jacobhsu.us.auth0.com/login/callback`
Website URL `https://jacobhsu.us.auth0.com`
## Discord
[discord-social-connection](https://marketplace.auth0.com/integrations/discord-social-connection)
OAuth2
Client information `CLIENT ID` `CLIENT SECRET`
Redirects `https://jacobhsu.us.auth0.com/login/callback`
## localhost
react-auth0>`serve build`
http://localhost:5000
## Passwordless
[old] auth0-blog / [swapart](https://github.com/auth0-blog/swapart)
[SMS Passwordless Authentication](https://auth0.com/blog/sms-passwordless-authentication/?utm_source=medium&utm_medium=sc&utm_campaign=sms_passwordless)
[Lock v11 for Web](https://auth0.com/docs/libraries/lock)
## Auth0 React SDK Sample Application
This sample demonstrates the integration of [Auth0 React SDK](https://github.com/auth0/auth0-react) into a React application created using [create-react-app](https://reactjs.org/docs/create-a-new-react-app.html). The sample is a companion to the [Auth0 React SDK Quickstart](https://auth0.com/docs/quickstart/spa/react).
This sample demonstrates the following use cases:
- [Login](https://github.com/auth0-samples/auth0-react-samples/blob/master/Sample-01/src/components/NavBar.js#L72-L79)
- [Logout](https://github.com/auth0-samples/auth0-react-samples/blob/master/Sample-01/src/components/NavBar.js#L102-L108)
- [Showing the user profile](https://github.com/auth0-samples/auth0-react-samples/blob/master/Sample-01/src/views/Profile.js)
- [Protecting routes](https://github.com/auth0-samples/auth0-react-samples/blob/master/Sample-01/src/views/Profile.js#L33)
- [Calling APIs](https://github.com/auth0-samples/auth0-react-samples/blob/master/Sample-01/src/views/ExternalApi.js)
## Project setup
Use `npm` to install the project dependencies:
```bash
npm install
```
## Configuration
### Create an API
For the ["call an API"](https://auth0.com/docs/quickstart/spa/react/02-calling-an-api) page to work, you will need to [create an API](https://auth0.com/docs/apis) using the [management dashboard](https://manage.auth0.com/#/apis). This will give you an API identifier that you can use in the `audience` configuration field below.
If you do not wish to use an API or observe the API call working, you should not specify the `audience` value in the next step. Otherwise, you will receive a "Service not found" error when trying to authenticate.
### Configure credentials
The project needs to be configured with your Auth0 domain and client ID in order for the authentication flow to work.
To do this, first copy `src/auth_config.json.example` into a new file in the same folder called `src/auth_config.json`, and replace the values with your own Auth0 application credentials, and optionally the base URLs of your application and API:
```json
{
"domain": "{YOUR AUTH0 DOMAIN}",
"clientId": "{YOUR AUTH0 CLIENT ID}",
"audience": "{YOUR AUTH0 API_IDENTIFIER}",
"appOrigin": "{OPTIONAL: THE BASE URL OF YOUR APPLICATION (default: http://localhost:3000)}",
"apiOrigin": "{OPTIONAL: THE BASE URL OF YOUR API (default: http://localhost:3001)}"
}
```
**Note**: Do not specify a value for `audience` here if you do not wish to use the API part of the sample.
## Run the sample
### Compile and hot-reload for development
This compiles and serves the React app and starts the backend API server on port 3001.
```bash
npm run dev
```
## Deployment
### Compiles and minifies for production
```bash
npm run build
```
### Docker build
To build and run the Docker image, run `exec.sh`, or `exec.ps1` on Windows.
### Run your tests
```bash
npm run test
```
## Frequently Asked Questions
If you're having issues running the sample applications, including issues such as users not being authenticated on page refresh, please [check the auth0-react FAQ](https://github.com/auth0/auth0-react/blob/master/FAQ.md).
## What is Auth0?
Auth0 helps you to:
* Add authentication with [multiple sources](https://auth0.com/docs/identityproviders), either social identity providers such as **Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce** (amongst others), or enterprise identity systems like **Windows Azure AD, Google Apps, Active Directory, ADFS, or any SAML Identity Provider**.
* Add authentication through more traditional **[username/password databases](https://auth0.com/docs/connections/database/custom-db)**.
* Add support for **[linking different user accounts](https://auth0.com/docs/users/user-account-linking)** with the same user.
* Support for generating signed [JSON Web Tokens](https://auth0.com/docs/tokens/json-web-tokens) to call your APIs and **flow the user identity** securely.
* Analytics of how, when, and where users are logging in.
* Pull data from other sources and add it to the user profile through [JavaScript rules](https://auth0.com/docs/rules).
## Create a Free Auth0 Account
1. Go to [Auth0](https://auth0.com) and click **Sign Up**.
2. Use Google, GitHub, or Microsoft Account to login.
## Issue Reporting
If you have found a bug or if you have a feature request, please report them at this repository issues section. Please do not report security vulnerabilities on the public GitHub issue tracker. The [Responsible Disclosure Program](https://auth0.com/responsible-disclosure-policy) details the procedure for disclosing security issues.
## Author
[Auth0](https://auth0.com)
## License
This project is licensed under the MIT license. See the [LICENSE](../LICENSE) file for more info.