{"id":17353703,"url":"https://github.com/salvoravida/react-adal","last_synced_at":"2025-05-15T08:07:06.455Z","repository":{"id":27273576,"uuid":"113149115","full_name":"salvoravida/react-adal","owner":"salvoravida","description":"Azure Active Directory Library (ADAL) support for ReactJS","archived":false,"fork":false,"pushed_at":"2025-02-18T10:08:54.000Z","size":436,"stargazers_count":217,"open_issues_count":19,"forks_count":53,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-03T04:08:58.150Z","etag":null,"topics":["active","adal","azure","directory","iframe","react","react-adal","reactjs"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salvoravida.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2017-12-05T07:38:21.000Z","updated_at":"2025-02-26T19:47:05.000Z","dependencies_parsed_at":"2024-06-18T13:37:48.655Z","dependency_job_id":"da9c87d5-6817-46c7-88f9-4d9579de9e48","html_url":"https://github.com/salvoravida/react-adal","commit_stats":{"total_commits":81,"total_committers":14,"mean_commits":5.785714285714286,"dds":0.2592592592592593,"last_synced_commit":"07b4948d06ef6d8a051969cc7a185c74cc2b022b"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-adal","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-adal/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-adal/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salvoravida%2Freact-adal/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salvoravida","download_url":"https://codeload.github.com/salvoravida/react-adal/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248166865,"owners_count":21058481,"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":["active","adal","azure","directory","iframe","react","react-adal","reactjs"],"created_at":"2024-10-15T17:17:45.048Z","updated_at":"2025-04-10T06:19:56.409Z","avatar_url":"https://github.com/salvoravida.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg alt=\"react-adal\" src=\"https://i.postimg.cc/Xvg09cyT/react-adal.logo.png\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\nAzure Active Directory Library (ADAL) support for \u003ca href=\"https://facebook.github.io/react\"\u003eReact\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-adal\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/react-adal.svg?style=flat-square\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/react-adal\"\u003e\u003cimg src=\"https://img.shields.io/npm/dt/react-adal.svg?style=flat-square\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n# react-adal\nAzure Active Directory Library (ADAL) support for ReactJS\n\n```\nnpm install react-adal\n```\n\nindex.js\n\n```javascript\n\nimport { runWithAdal } from 'react-adal';\nimport { authContext } from './adalConfig';\n\nconst DO_NOT_LOGIN = false;\n\nrunWithAdal(authContext, () =\u003e {\n\n  // eslint-disable-next-line\n  require('./indexApp.js');\n\n},DO_NOT_LOGIN);\n\n```\n\nThis index wrap is needed because ADAL use iframes for token silent refresh,\nand we do not want to have duplicated ReactApp started on iframes too!\n\nindexApp.js (your real app index as it already is - example below)\n```javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { Provider } from 'react-redux';\nimport { store } from './store';\nimport App from './App';\n\n  ReactDOM.render(\n    \u003cProvider store={store}\u003e\n      \u003cApp /\u003e\n    \u003c/Provider\u003e,\n    document.getElementById('root'),\n  );\n\n```\n\nadalConfig.js\n\n```javascript\n\nimport { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';\n\nexport const adalConfig = {\n  tenant: '14d71d65-f596-4eae-be30-27f079bf8d4b',\n  clientId: '14d71d65-f596-4eae-be30-27f079bf8d4b',\n  endpoints: {\n    api: '14d71d65-f596-4eae-be30-27f079bf8d4b',\n  },\n  cacheLocation: 'localStorage',\n};\n\nexport const authContext = new AuthenticationContext(adalConfig);\n\nexport const adalApiFetch = (fetch, url, options) =\u003e\n  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);\n\nexport const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);\n\n```\n\nuse adalApiFetch with your favorite \"fetch\" in your api call.\n\n# withAdalLoginApi HOC\n\nchange DO_NOT_LOGIN to true on index.js to stop login on index.js\n\n```javascript\n\nimport MyPage from './myPageComponent';\nimport Loading from './Loading';\nimport ErrorPage from './ErrorPage';\n\nconst MyProtectedPage = withAdalLoginApi(MyPage, () =\u003e \u003cLoading /\u003e, (error) =\u003e \u003cErrorPage error={error}/\u003e);\n\n\u003cRoute \n   path=\"/onlyLoggedUsers\"\n   render={ ()=\u003e \u003cMyProtectedPage /\u003e } \n/\u003e\n\n```\n# Logging Out\n\nThe AuthenticationContext object (authContext) has a built in function (logOut) to log out of a session. This function redirects user to the logout endpoint.\nAfter logout, the user will be redirected to the postLogoutRedirectUri if it was added as a property on the config object.\nThe following code shows an example of how to create a Log Out dropdown in a NavBar\n\n```javascript\nimport React from 'react';\nimport { Navbar, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';\nimport { authContext } from '../adalConfig';\n\n...\n\n  render() {\n    return (\n      \u003cheader\u003e\n        \u003cNavBar\u003e\n          ...\n            \u003cDropdown\u003e\n              \u003cDropdownMenu\u003e\n                \u003cDropdownItem onClick={() =\u003e authContext.logOut()}\u003e\n                  Logout\n                \u003c/DropdownItem\u003e\n              \u003c/DropdownMenu\u003e\n            \u003c/Dropdown\u003e\n          ...\n        \u003c/NavBar\u003e\n      \u003c/header\u003e\n    );\n  }\n```\n\n\n# changelog\nview -\u003e [CHANGELOG.md](CHANGELOG.md)\n\n# tutorials from the web\n\nhttps://itnext.io/a-memo-on-how-to-implement-azure-ad-authentication-using-react-and-net-core-2-0-3fe9bfdf9f36\n\nhttps://medium.com/@dmitrii.korolev1/react-adal-typescript-pnp-sp-93ef69eddd18\n\n\n# inspired by\n\nhttps://blog.mastykarz.nl/building-office-365-web-applications-react/\n\nhttps://medium.com/@adpreg/react-with-redux-app-with-azure-ad-auth-and-net-core-starter-project-88b1bbdb7856\n\nhttps://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols-implicit\n\n\n# MS adal.js\nhttps://github.com/AzureAD/azure-activedirectory-library-for-js\n\n# credits\n\nThat's all. Enjoy!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalvoravida%2Freact-adal","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalvoravida%2Freact-adal","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalvoravida%2Freact-adal/lists"}