{"id":22268083,"url":"https://github.com/curityio/react-assisted-token-website","last_synced_at":"2025-07-28T12:30:52.882Z","repository":{"id":42428206,"uuid":"121021171","full_name":"curityio/react-assisted-token-website","owner":"curityio","description":"Example React SPA that implements OpenID Connect using the assisted token flow","archived":false,"fork":false,"pushed_at":"2024-11-07T09:52:53.000Z","size":5952,"stargazers_count":9,"open_issues_count":7,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-07T10:38:09.572Z","etag":null,"topics":["assisted-token","code-example","oauth2","openid-connect","react","spa"],"latest_commit_sha":null,"homepage":"https://curity.io/resources/learn/react-assisted-token-website/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/curityio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2018-02-10T14:14:31.000Z","updated_at":"2024-11-07T09:51:58.000Z","dependencies_parsed_at":"2024-05-02T03:53:32.804Z","dependency_job_id":"74aa13c4-10c0-4fc3-acdc-55c19e090199","html_url":"https://github.com/curityio/react-assisted-token-website","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/curityio%2Freact-assisted-token-website","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Freact-assisted-token-website/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Freact-assisted-token-website/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/curityio%2Freact-assisted-token-website/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/curityio","download_url":"https://codeload.github.com/curityio/react-assisted-token-website/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227905532,"owners_count":17837906,"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":["assisted-token","code-example","oauth2","openid-connect","react","spa"],"created_at":"2024-12-03T11:11:01.676Z","updated_at":"2025-07-28T12:30:52.874Z","avatar_url":"https://github.com/curityio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Assisted Token Example\n\n[![Quality](https://img.shields.io/badge/quality-demo-red)](https://curity.io/resources/code-examples/status/)\n[![Availability](https://img.shields.io/badge/availability-source-blue)](https://curity.io/resources/code-examples/status/)\n\n\nBelow you will find some information on how to perform common tasks.\u003cbr\u003e\n\nFor the project to build, **these files must exist with exact filenames**:\n\n* `public/index.html` is the page template;\n* `src/index.js` is the JavaScript entry point.\n\nYou can delete or rename the other files.\n\nYou may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.\u003cbr\u003e\nYou need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them.\n\nOnly files inside `public` can be used from `public/index.html`.\u003cbr\u003e\nRead instructions below for using assets from JavaScript and HTML.\n\nYou can, however, create more top-level directories.\u003cbr\u003e\nThey will not be included in the production build, so you can use them for things like documentation.\n\n## Quick Start\nIn this example, an API call is made using an access token received from a Curity server after authentication using the \"assisted token flow\".\nThe client uses the React framework and shows how to use this development tool to perform the assisted token flow.\nFor that, it calls a RESTful API that is hosted in a separate node server. To start both, simply invoke the following command:\n\n```nodemon\nnpm start\n```\n\nThen, navigate to http://localhost:3000 in a web browser.  \n\nYou can make changes to the React single-page application (SPA) to perform your own experimentation. \nIf you do, the changes you make to the app's source files will automatically reload. \nIf you change the API that the client invokes, you do not need to start the node API server. \nTo do this, run `npm run run-app` instead of `npm start`.\nIf you want to start only the API, you can do so with the command `node server/server.js`.\n\n\n\n## Build app for production\n\n```nodemon\nnpm run build\n```\n\nBuilds the app for production to the `build` folder.\u003cbr\u003e\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\u003cbr\u003e\nYour app is ready to be deployed!\n\n\n## Curity Configuration\nIn order to run this example you need to make some configurations in Curity server.    \nThe easiest way is to [download and install the sample configuration](https://developer.curity.io/release/4.5.0/configuration-samples) from curity docs.   \nThis sample configuration has already configured one `Authentication Profile` and one `OAuth Profile`. The `OAuth Profile` also has an app configured (`client-assisted-example`).   \n\nIf you are not using the sample configuration, then you need to make sure the following configuration changes are made before you use this example. \n\n\n1. Login into the `Admin UI` and make sure that you have uploaded a valid license under `System -\u003e General`.\n\n\n   ![image](./docs/images/license.png)\n   \n2. Go to `Token Service` profile and make sure that at least `Implicit Flow` and `Assisted Token` are enabled on the `Client Settings` page of that profile.\n\n\n   ![image](./docs/images/profile-capabilities.png)\n\n3. Go to the `Clients` page of the profile and create a client called `client-assisted-example`.\n\n\n   ![image](./docs/images/clients.png)\n\n4. This client (accessible from `Token Service -\u003e Clients -\u003e client-assisted-example -\u003e Edit Client`) should have the `Implicit Flow` and `Assisted Token` capabilities selected under the `Capabilities` section.\n\n\n   ![image](./docs/images/client-capabilities.png)\n\n5. Navigate to `OAuth/OpenID Settings` section make sure to add `openid` scope.\n   \n![image](./docs/images/openid-scope.png)\n\n6. Update the `Redirect URIs` and `Allowed Origins` settings for the `client-assisted-example` Client. The redirect URI should be `http://localhost:3000`. The allowed origin should be the same or, for testing purposes, you can also use `*`.\n\n\n   ![image](./docs/images/client-application-settings.png)\n       \n7. `Commit` the changes and you are all setup.\n\nIf you compare the final config with the sample config, then you will find the following salient differences.\n\n```xml\n\u003cclient-store\u003e\n    \u003cconfig-backed\u003e\n        \u003cclient\u003e\n            \u003cid\u003eclient-assisted-example\u003c/id\u003e\n            \u003credirect-uris\u003ehttp://localhost:3000\u003c/redirect-uris\u003e\n            \u003callowed-origins\u003e*\u003c/allowed-origins\u003e\n            \u003ccapabilities\u003e\n                \u003cimplicit/\u003e\n                \u003cassisted-token/\u003e\n            \u003c/capabilities\u003e\n        \u003c/client\u003e\n        \u003c!-- ... --\u003e\n    \u003c/config-backed\u003e\n\u003c/client-store\u003e       \n```\n\n## Integrate with React App  \nTo integrate this example into any of React app, you need to copy `App Component` (`App.js`) and `constants.js` files into your project.\n\n\nThe last thing is to configure environment variables like `ISSUER`, `CLIENT_ID`, `API_URL`,`AUTH_SERVER_ORIGIN` and `OPENID_CONFIGURATION_URL` in `constants.js` file.\nYou can see the following example environment config:\n\n```javascript\nexport const ISSUER = \"https://localhost:8443/\";\nexport const CLIENT_ID = \"client-assisted-example\";\nexport const API_URL = \"http://127.0.0.1:8100\";\nexport const AUTH_SERVER_ORIGIN = \"http://127.0.0.1:8100\";\nexport const OPENID_CONFIGURATION_URL = 'oauth/v2/oauth-anonymous/.well-known/openid-configuration';\n```\n\n## Supported Browsers\n\nBy default, the generated project uses the latest version of React.\n\nYou can refer [to the React documentation](https://reactjs.org/docs/react-dom.html#browser-support) for more information about supported browsers.\n\n## More Information\nFor more information about Curity, its capabilities, and how to use it with React and other app development frameworks, visit [developer.curity.io](https://developer.curity.io/). For background information on using Curity for API access, consult the [API integration section of the Curity developer manual](https://support.curity.io/docs/4.5.0/developer-guide/api-integration/overview.html). For additional insights in how to use Curity with microservices and APIs from SPAs, read _[How to Control User Identity within Microservices](http://nordicapis.com/how-to-control-user-identity-within-microservices/)_ on the Nordic APIs blog. You may also be interested in validating tokens sent from the React front-end in a gateway like [Apigee](https://developer.curity.io/tutorials/apigee-integration) or [NGINX](https://github.com/curityio/nginx_phantom_token_module). \n\n## Licensing\n\nThis software is copyright (C) 2019 Curity AB. It is open source software that is licensed under the [Apache 2](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurityio%2Freact-assisted-token-website","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcurityio%2Freact-assisted-token-website","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcurityio%2Freact-assisted-token-website/lists"}