|
| 1 | +# Static Web App Auth tools for React |
| 2 | + |
| 3 | + | [](https://npmjs.org/package/react-static-web-apps-auth) |
| 4 | + |
| 5 | +This package is a series of helper tools for working with [Azure Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/?WT.mc_id=javascript-12079-aapowell) [Authentication and Authorization](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization?WT.mc_id=javascript-12079-aapowell) from React. |
| 6 | + |
| 7 | +## Installation |
| 8 | + |
| 9 | +You can install a stable release from npm: |
| 10 | + |
| 11 | +```bash |
| 12 | +npm install @aaronpowell/react-static-web-apps-auth |
| 13 | +``` |
| 14 | + |
| 15 | +Or you can install the latest build from GitHub packages. |
| 16 | + |
| 17 | +## Usage |
| 18 | + |
| 19 | +The package contains some components that wrap the functionality for you. |
| 20 | + |
| 21 | +### `<StaticWebAppsAuthLogins />` |
| 22 | + |
| 23 | +```typescript |
| 24 | +const Login = () => { |
| 25 | + return ( |
| 26 | + <div> |
| 27 | + <h2>Login to our site</h2> |
| 28 | + <StaticWebAppsAuthLogins aad={false} /> |
| 29 | + </div> |
| 30 | + ); |
| 31 | +}; |
| 32 | +``` |
| 33 | + |
| 34 | +This component will display all the auth providers you want to use on your application and links for the user. |
| 35 | + |
| 36 | +By default all auth providers will display, but they can be turned off by setting their corresponding prop to `false`. |
| 37 | + |
| 38 | +To redirect to a specific URL post-login, provide that path in the `postLoginRedirect` prop. |
| 39 | + |
| 40 | +### `<UserInfoContextProvider>` |
| 41 | + |
| 42 | +```typescript |
| 43 | +const App = () => { |
| 44 | + return ( |
| 45 | + <UserInfoContextProvider> |
| 46 | + <MySite /> |
| 47 | + </UserInfoContextProvider> |
| 48 | + ); |
| 49 | +}; |
| 50 | +``` |
| 51 | + |
| 52 | +This component provides React Context for the current user (or a series of `undefined` values when you're not logged in), aligning with the information available [in the Client Principal](https://docs.microsoft.com/azure/static-web-apps/user-information?tabs=javascript#client-principal-data&WT.mc_id=javascript-12079-aapowell). |
| 53 | + |
| 54 | +Additionally, a `useContext` React Hook is available, `useUserInfo`, for use within the application. |
| 55 | + |
| 56 | +### `<Logout />` |
| 57 | + |
| 58 | +This component provides the logout function through Static Web Apps. |
| 59 | + |
| 60 | +To redirect to a specific URL post-logout, provide the path in the `postLogoutRedirect` prop. |
| 61 | + |
| 62 | +### `<UserPurge />` |
| 63 | + |
| 64 | +This component provides the user with the ability to [remove their identifying information from Static Web Apps](https://docs.microsoft.com/azure/static-web-apps/authentication-authorization?WT.mc_id=javascript-12079-aapowell#remove-personal-identifying-information). By default it'll only purge them from the current domain, but set the `globally` prop to `true` if you with to give them the ability to completely remove themselves from Static Web Apps. |
| 65 | + |
| 66 | +## Styling |
| 67 | + |
| 68 | +Each of the components generates minimal HTML (a single `<a>` tag) to make it easier to style within an application. The DOM elements have the class `azure-swa-auth`, defined in `./constants` as `StaticWebAppsClassName`, on them, along with the component type, `login`, `logout` or `purge`. |
| 69 | + |
| 70 | +Additionally, the login components have the provider as a class, so providers can be styled individually. |
| 71 | + |
| 72 | +## License |
| 73 | + |
| 74 | +MIT |
0 commit comments