Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lukasjhan/furo-sdk-react

React SDK for Furo
https://github.com/lukasjhan/furo-sdk-react

Last synced: 21 days ago
JSON representation

React SDK for Furo

Awesome Lists containing this project

README

        


Furo Logo

# Furo React SDK

Check Furo's [Official Documentation](https://docs.furo.one/react-sdk).

## FuroProvider

This is a component required for the Furo plugin implementation function, and all paths to use the Furo SDK must be wrapped.

```javascript
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { FuroProvider } from 'furo-react';
import App from './App';

ReactDOM.render(


,
document.getElementById('root'),
);
```

### Parameters

| Name | Type | Description | Required |
| ----------- | ------ | -------------------------------------------------------------------------------------------------- | -------- |
| domain | string | Using loginWithRedirect The login page to redirect to, using the default of https://auth.furo.one. | Yes |
| clientId | string | This is the client identifier assigned when creating the Furo project. | Yes |
| redirectUri | string | This is the uri of the page to go to after login. | Yes |

## useFuro

This is a hook that provides the Furo SDK instance.

```javascript
// src/App.js
import React from 'react';
import { useFuro } from 'furo-react';

function App() {
const { isLoading, isAuthenticated, user, loginWithRedirect, logout } =
useFuro();

const onLogout = () => {
logout();
loginWithRedirect();
};

if (isLoading) {
return

Loading...
;
}

if (isAuthenticated) {
return (


Hello {user.name} Log out

);
} else {
return {`Log in`};
}
}

export default App;
```

### Property

- loginWithRedirect

This function moves to the domain specified by FuroProvider.

```javascript
const loginWithRedirect: () => void;
```

- logOut

This is the logout function.

```javascript
const logout: () => void;
```

- isLoading

A status value that takes true if login is in progress, false otherwise.

```javascript
const isLoading: boolean;
```

- isAuthenticated

A state value that holds true if logged in and false if not logged in.

```javascript
const isAuthenticated: boolean;
```

- user

A user object containing login information.

```javascript
const isAuthenticated: User;
```