{"id":20844546,"url":"https://github.com/pushpabrol/react-custom-login-form-calling-api","last_synced_at":"2025-07-13T03:39:30.963Z","repository":{"id":92530026,"uuid":"100278622","full_name":"pushpabrol/react-custom-login-form-calling-api","owner":"pushpabrol","description":null,"archived":false,"fork":false,"pushed_at":"2017-08-14T14:56:23.000Z","size":73,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-19T04:34:09.992Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/pushpabrol.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-14T14:48:31.000Z","updated_at":"2017-08-14T14:56:24.000Z","dependencies_parsed_at":null,"dependency_job_id":"f634820a-030f-4b3f-9711-d4973760c287","html_url":"https://github.com/pushpabrol/react-custom-login-form-calling-api","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpabrol%2Freact-custom-login-form-calling-api","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpabrol%2Freact-custom-login-form-calling-api/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpabrol%2Freact-custom-login-form-calling-api/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pushpabrol%2Freact-custom-login-form-calling-api/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pushpabrol","download_url":"https://codeload.github.com/pushpabrol/react-custom-login-form-calling-api/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243205234,"owners_count":20253427,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-18T02:09:54.971Z","updated_at":"2025-03-12T11:17:15.578Z","avatar_url":"https://github.com/pushpabrol.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Auth0 React Calling an API\n\nThis sample demonstrates how to make secure calls to an API after authenticating a user with Auth0. The calls to the API are made with the user's `access_token`. The sample makes use of Auth0's hosted login page which provides centralized authentication. The sample uses create-react-app.\n\nThere is a [short screencast](https://www.youtube.com/watch?v=ti2zMJm34Cw) available.\n\n## Getting Started\n\nIf you haven't already done so, [sign up](https://auth0.com) for your free Auth0 account and create a new client in the [dashboard](https://manage.auth0.com). Find the **domain** and **client ID** from the settings area and add the URL for your application to the **Allowed Callback URLs** box. If you are using the server provided by the create-react-app, that URL is `http://localhost:3000`.\n\nClone the repo or download it from the React quickstart page in Auth0's documentation. Install create-react-app globally and the dependencies for the app.\n\n```bash\nnpm install\n```\n\n\u003e **Note:** If you are not using create-react-app but are using Babel, you need to add the `stage-0` preset.\n\n## Set up a new API\n\nMore complete documentation is available at [React Calling an API](https://auth0.com/docs/quickstart/spa/react/03-calling-an-api).\n\nFrom the Auth0 dashboard, select the APIs section and select \"Create API\". \n* Add a name for the API. `A friendly name for the API.`\n* Select an identifier for the endpoint. `A logical identifier for this API. We recommend using a URL but note that this doesn’t have to be a publicly available URL, Auth0 will not call your API at all. Important! This field cannot be modified.`\n\nFor purposes of this demo, you may want to consider using http://localhost:3001 as your identifier.\n\nYou will also need to add in a new scope. `Scopes allow you to define the data that will be accessed through the applications to your API. Set a name for them and its description for better understanding.`\n* Select the Scopes tab from the API section\n* in the name textbox, enter in `read:messages`\n* add a description for this scope ex: `permission to read messages` and click the 'add' button.\n\n## Set the Client ID and Domain\n\nIf you download the sample from the quickstart page, it will come pre-populated with the **client ID** and **domain** for your application. If you clone the repo directly from Github, rename the `auth0-variables.js.example` file to `auth0-variables.js` and provide the **client ID** and **domain** there. This file is located in `src/Auth/`.\n\nYou should also provide the identifier for the API you create in the Auth0 dashboard as your `apiUrl`.\n\n## Set Up the `.env` File\n\nIn addition to the above-mentioned `auth0-variables.js` file, a `.env` file is provided at the root of the application. This file provides your application's credentials to the small Node server located in `server.js`.\n\nThis file has two values, `AUTH0_AUDIENCE` and `AUTH0_DOMAIN`. If you download this sample from the quickstart page, the value for `AUTH0_DOMAIN` will be populated automatically, but you will still need to populate `AUTH0_AUDIENCE` manually. The value for `AUTH0_AUDIENCE` is the identifier used for an API that you create in the Auth0 dashboard.\n\n## Run the Application\n\nThe development server that comes with create-react-app can be used to serve the application.\n\n```bash\nnpm start\n```\n\nThe application will be served at `http://localhost:3000`.\n\n## What is Auth0?\n\nAuth0 helps you to:\n\n* Add authentication with [multiple authentication sources](https://docs.auth0.com/identityproviders), either social like **Google, Facebook, Microsoft Account, LinkedIn, GitHub, Twitter, Box, Salesforce, amont others**, or enterprise identity systems like **Windows Azure AD, Google Apps, Active Directory, ADFS or any SAML Identity Provider**.\n* Add authentication through more traditional **[username/password databases](https://docs.auth0.com/mysql-connection-tutorial)**.\n* Add support for **[linking different user accounts](https://docs.auth0.com/link-accounts)** with the same user.\n* Support for generating signed [Json Web Tokens](https://docs.auth0.com/jwt) to call your APIs and **flow the user identity** securely.\n* Analytics of how, when and where users are logging in.\n* Pull data from other sources and add it to the user profile, through [JavaScript rules](https://docs.auth0.com/rules).\n\n## Create a free Auth0 account\n\n1. Go to [Auth0](https://auth0.com/signup) and click Sign Up.\n2. Use Google, GitHub or Microsoft Account to login.\n\n## Issue Reporting\n\nIf 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/whitehat) details the procedure for disclosing security issues.\n\n## Author\n\n[Auth0](auth0.com)\n\n## License\n\nThis project is licensed under the MIT license. See the [LICENSE](LICENSE.txt) file for more info.\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushpabrol%2Freact-custom-login-form-calling-api","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpushpabrol%2Freact-custom-login-form-calling-api","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpushpabrol%2Freact-custom-login-form-calling-api/lists"}