{"_id":"@douglasdennys/react-adal-ad-fs","_rev":"1-7ab49844856edfdab5959241a0a9346e","name":"@douglasdennys/react-adal-ad-fs","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@douglasdennys/react-adal-ad-fs","version":"0.0.1","description":"Azure Active Directory (ADAL) support for ReactJS","main":"lib/react-adal.js","author":{"name":"salvoravida"},"scripts":{"build":"cross-env NODE_ENV=production babel src --out-dir lib","prepare":"npm run build","prepublishOnly":"npm run build","sdk:update":"node internals/update-sdk.js"},"keywords":["react","implicit","js","AAD","adal","oauth","oauth2","azure","react-adal","actve","directory","msal"],"license":"MIT","bugs":{"url":"https://github.com/douglasdennys45/react-adal-ad-fs/issues"},"homepage":"https://github.com/douglasdennys45/react-adal-ad-fs#readme","dependencies":{},"peerDependencies":{"react":"^15.0.0 || ^16.0.0 || ^17.0.0"},"devDependencies":{"@babel/cli":"^7.12.10","@babel/core":"^7.12.10","@babel/plugin-proposal-class-properties":"^7.12.1","@babel/preset-env":"^7.12.11","@babel/preset-react":"^7.12.10","@salvoravida/eslint-config":"0.0.4","cross-env":"7.0.2","react":"^16.14.0","react-dom":"^16.14.0"},"gitHead":"305ed6a80d50d00b5a59372e0a5b2f1ebc0e97c4","_id":"@douglasdennys/react-adal-ad-fs@0.0.1","_nodeVersion":"14.17.4","_npmVersion":"6.14.14","dist":{"integrity":"sha512-rmaDEZ5ShhJux673qYJoZbHj/LvI4xHAtEp6Tq5bHC//7/oDob9yHX3401yTJH/yz8p56Uz61ZV1nGgYmf23hg==","shasum":"52fdea86fc3af41051a3ce2ddba9f30da9ef5e4f","tarball":"https://registry.npmjs.org/@douglasdennys/react-adal-ad-fs/-/react-adal-ad-fs-0.0.1.tgz","fileCount":17,"unpackedSize":181543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC83uCRA9TVsSAnZWagAA7NgP/2Hq6PplogUPVKS8Mc6+\n2WHLp04PKepQZXS2Dh7pzJlUg109sqsU0VgcdcReK+sUXmPmKqVenTQTqLX4\nKHytrc7WoweygNOd7FWzy9j8VWt/aD1R4Pl9nwy2nta/MKY33td1UxQ/2iWw\nFuEHKPznOXy8zSAT2nZYqnP3Rc+3ReIirH5Z6zYN+ukBpBxt/mXOaJb+iYGf\noBN5oCQ6Ib3WE1p3JieOr9Ru8xKmf5AIUqHLWCOIT1lMYmOES04H7aUr6FVq\nrmdJ3Zh3NAQPMnUjaYq5htwAHtcRUxpoL0MYRJXx0o9dl+F7GIkIanedtNxe\ni17Sty/3cj2pCyADNtjzYnENBzEW9nHEvek0H6WLol6cjEh+EGRbJlbion5Q\n1sbyg8A8/FGPbj/g2VlFebHSiGHF4Wjwpr/Bc5mFdYUg7ne81BsPzq1xr/oy\nPtVP8YJCgT9wIM3QRRbp/jTlHc+oaw5xRpziRR/BVLgQ50aRfWlVsbmwrkE6\nDR2rLQo0Ixa7HLrsOH8GGft1jFc4HQKiE/4WZuSZo7TYt0be0NBBJ6IKyMze\nPLDQ7MmZkbH7ME9/yv5IDlcLx2ne2BLPcV8/ro9x6mwU1EAdXAqJKkQySyCe\niyk0yHsMXT289QYm4K6BWomD9CsShNQfD35fjDNcUngWpCvFNSlKkMBF1KSp\nqWgP\r\n=R3RN\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQD16QQaExveHBfUssJTidikMQkpU5radJXRP1HfzOw6xAIge21sCv4uuzdHkvJlJwLj7Ce7byH+aXyyNg/VhSC+cHQ="}]},"_npmUser":{"name":"douglasdennys","email":"douglasdennys45@gmail.com"},"directories":{},"maintainers":[{"name":"douglasdennys","email":"douglasdennys45@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-adal-ad-fs_0.0.1_1628163565828_0.4087269605416104"},"_hasShrinkwrap":false}},"time":{"created":"2021-08-05T11:39:25.742Z","0.0.1":"2021-08-05T11:39:26.028Z","modified":"2022-04-05T05:30:31.009Z"},"maintainers":[{"name":"douglasdennys","email":"douglasdennys45@gmail.com"}],"description":"Azure Active Directory (ADAL) support for ReactJS","homepage":"https://github.com/douglasdennys45/react-adal-ad-fs#readme","keywords":["react","implicit","js","AAD","adal","oauth","oauth2","azure","react-adal","actve","directory","msal"],"author":{"name":"salvoravida"},"bugs":{"url":"https://github.com/douglasdennys45/react-adal-ad-fs/issues"},"license":"MIT","readme":"<p align=\"center\">\n    <img alt=\"react-adal\" src=\"https://i.postimg.cc/Xvg09cyT/react-adal.logo.png\">\n</p>\n\n<p align=\"center\">\nAzure Active Directory Library (ADAL) support for <a href=\"https://facebook.github.io/react\">React</a>\n</p>\n\n<p align=\"center\">\n  <a href=\"https://www.npmjs.com/package/react-adal\"><img src=\"https://img.shields.io/npm/v/react-adal.svg?style=flat-square\"></a>\n  <a href=\"https://www.npmjs.com/package/react-adal\"><img src=\"https://img.shields.io/npm/dt/react-adal.svg?style=flat-square\"></a>\n</p>\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, () => {\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    <Provider store={store}>\n      <App />\n    </Provider>,\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) =>\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, () => <Loading />, (error) => <ErrorPage error={error}/>);\n\n<Route \n   path=\"/onlyLoggedUsers\"\n   render={ ()=> <MyProtectedPage /> } \n/>\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      <header>\n        <NavBar>\n          ...\n            <Dropdown>\n              <DropdownMenu>\n                <DropdownItem onClick={() => authContext.logOut()}>\n                  Logout\n                </DropdownItem>\n              </DropdownMenu>\n            </Dropdown>\n          ...\n        </NavBar>\n      </header>\n    );\n  }\n```\n\n\n# changelog\nview -> [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","readmeFilename":"README.md"}