https://github.com/loginradius/loginradius-react
LoginRadius React SDK
https://github.com/loginradius/loginradius-react
hacktoberfest hacktoberfest2021 react sdk
Last synced: about 1 year ago
JSON representation
LoginRadius React SDK
- Host: GitHub
- URL: https://github.com/loginradius/loginradius-react
- Owner: LoginRadius
- License: mit
- Created: 2021-06-04T11:08:42.000Z (about 5 years ago)
- Default Branch: develop
- Last Pushed: 2023-04-07T01:25:18.000Z (about 3 years ago)
- Last Synced: 2025-03-25T06:07:54.138Z (about 1 year ago)
- Topics: hacktoberfest, hacktoberfest2021, react, sdk
- Language: TypeScript
- Homepage:
- Size: 922 KB
- Stars: 5
- Watchers: 5
- Forks: 9
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# loginradius-react
[](https://opensource.org/licenses/MIT)
[](https://www.npmjs.com/package/loginradius-react)
## Table of Contents
- [Installation](#installation)
- [Getting Started](#getting-started)
- [Contributing](#contributing)
- [Support + Feedback](#support--feedback)
- [What is LoginRadius](#what-is-loginradius)
- [License](#license)
## Installation
Using [npm](https://npmjs.org/)
```bash
npm install loginradius-react
```
## Getting Started
Configure the SDK by wrapping your application in `LRAuthProvider`:
```jsx
// src/index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { LRAuthProvider } from "loginradius-react";
ReactDOM.render(
,
document.getElementById("root")
);
```
Use the `useLRAuth` hook in your components to access authentication state (`isLoading`, `isAuthenticated` and `user`) and authentication methods (`loginWithRedirect` and `logout`):
```jsx
// src/App.js
import React from "react";
import { useLRAuth } from "loginradius-react";
function App() {
const { isLoading, isAuthenticated, error, user, loginWithRedirect, logout } =
useLRAuth();
if (isLoading) {
return
Loading...;
}
if (error) {
return Oops... {error.message};
}
if (isAuthenticated) {
return (
Hello {user.name}{" "}
logout({ returnTo: window.location.origin })}>
Log out
);
} else {
return loginWithRedirect()}>Log in;
}
}
export default App;
```
### Protect a Route
Protect a route component using the `withAuthenticationRequired` higher order component. Visits to this route when unauthenticated will redirect the user to the login page and back to this page after login:
```jsx
import React from "react";
import { withAuthenticationRequired } from "loginradius-react";
const PrivateRoute = () =>
Private;
export default withAuthenticationRequired(PrivateRoute, {
// Show a message while the user waits to be redirected to the login page.
onRedirecting: () =>
Redirecting you to the login page...,
});
```
### Call an API
Call a protected API with an Access Token:
```jsx
import React, { useEffect, useState } from "react";
import { useLRAuth } from "loginradius-react";
const CallAPI = () => {
const { getAccessTokenSilently } = useLRAuth();
const [resp setResp] = useState(null);
useEffect(() => {
(async () => {
try {
const token = await getAccessTokenSilently();
const response = await fetch(
`https://api.loginradius.com/identity/v2/auth/access_token/validate?access_token=${token}&apiKey=${process.env.REACT_APP_API_KEY}`,
{}
);
setResp(await response.json());
} catch (e) {
console.error(e);
}
})();
}, [getAccessTokenSilently]);
if (!resp) {
return
Loading...;
}
return (
{JSON.stringify(state.apiMessage, null, 2)}
);
};
export default CallAPI;
```
### Using loginWithPopup
To implement `loginWithPopup` functionality in your app you need to perform following steps:
1. Open your LoginRadius Dashboard and navigate to `Auth Page (IDX) -> Themes -> Customize -> Switch to Advance Editor`.
2. In the right side you will find the tab called `Custom JS`, expand and select `Add New`.
3. A popup will open where you need to enter this url in the `Url` tab - https://hosted-pages.lrinternal.com/Themes/sdk/default-auth-react-sdk.js and click **Confirm**
4. This URL contains the script which will help to close the popup after the authentication is done.
5. Finally Click on **Save** and then add `loginWithPopup` method in your application.
## Contributing
We appreciate feedback and contribution to this repo! Before you get started, please see the following:
- [This repo's contribution guide](https://github.com/loginradius/loginradius-react/blob/main/CONTRIBUTING.md)
## Support + Feedback
For support or to provide feedback, please [raise an issue on our issue tracker](https://github.com/loginradius/loginradius-react/issues).
## What is LoginRadius
- LoginRadius was established with the vision of securing the identity of every person on the internet. Over a few short years, we have grown exponentially from a simple social login provider to a multi-faceted, industry-leading customer identity and access management (CIAM) platform.
- The LoginRadius Identity Platform helps companies securely manage customer identities and data to deliver a unified customer experience. We offer suites of modules to serve businesses from startups to Fortune 500 enterprises with hundreds of millions of users.
## License
This project is licensed under the MIT license. See the [LICENSE](https://github.com/loginradius/loginradius-react/blob/main/LICENSE) file for more info.