Nocturnal Prancing Mosquito

    @ringcentral/react
    TypeScript icon, indicating that this package has built-in type declarations

    4.7.3 • Public • Published

    Installation

    $ npm install --save @ringcentral/react @ringcentral/sdk

    Usage

    This example is using React Router.

    $ npm install react-router-dom --save

    First, you need to configure SDK:

    // lib.js
    import SDK from "@ringcentral/sdk";
    
    const redirectUri = `${window.location.origin}/api/redirect`; // make sure you have this configured in Dev Portal
    
    export const sdk = new SDK({
        appName: 'AppName',
        appVersion: '1.0.0',
        server: 'xxx',
        clientId: 'xxx',
        redirectUri
    });

    Next, configure the router:

    // Router.js
    import React from "react";
    import {BrowserRouter as Router, Redirect, Route, Switch} from "react-router-dom";
    import LoggedInWrapper from "./LoggedInWrapper";
    import LoggedOutWrapper from "./LoggedOutWrapper";
    
    export default () => (
        <Router>
            <Switch>
                <Route path="/app" component={LoggedInWrapper}/>
                <Route path="/api" component={LoggedOutWrapper}/>
                <Redirect from="/" to="/app"/>
            </Switch>
        </Router>
    );

    Next, configure the wrapper for non-authorized pages:

    // LoggedOutWrapper.js
    import React from 'react';
    import {Redirect, Route, Switch} from 'react-router-dom';
    import {withAuthGate} from '../lib'; // change to @ringcentral/react
    import OauthRedirect from './OauthRedirect';
    import Login from './Login';
    import {sdk} from './lib';
    
    const LoggedOutWrapper = ({isAuthorized, authorizing, authError, match, location}) => {
        if (authorizing) {
            return <div>Loading</div>;
        }
    
        if (isAuthorized) {
            const {from} = location.state || {from: {pathname: '/'}};
            console.log('Redirecting to', from);
            return <Redirect to={from} />;
        }
    
        return (
            <Switch>
                <Route path={`${match.url}/login`} exact component={Login} />
                <Route path={`${match.url}/oauth2Callback`} exact component={OauthRedirect} />
            </Switch>
        );
    };
    
    export default withAuthGate({sdk, ensure: true})(LoggedOutWrapper);

    Login page:

    // Login.js
    import React from 'react';
    import {withAuthGate} from '../lib'; // change to @ringcentral/react
    import {sdk} from './lib';
    
    const Login = ({authError, loginUrl, authorizing}) => {
        if (authorizing) return <div>Loading...</div>;
    
        const login = () => window.location.assign(loginUrl({implicit: true}));
    
        return (
            <div>
                {authError && <p>Auth error: {authError}</p>}
                <button type="button" onClick={login}>
                    Log in with RingCentral
                </button>
            </div>
        );
    };
    
    export default withAuthGate({sdk})(Login);

    Redirect landing page:

    // OauthRedirect.js
    import React from 'react';
    import {withAuthGate} from '../lib'; // change to @ringcentral/react
    import {sdk} from './lib';
    
    class OauthRedirect extends React.PureComponent {
        async componentDidMount() {
            const {
                location: {hash},
                parseRedirect
            } = this.props;
            await parseRedirect(hash);
        }
    
        render() {
            return <div>Redirecting...</div>;
        }
    }
    
    export default withAuthGate({sdk})(OauthRedirect);

    Now let's configure what happens when user is logged in:

    // LoggedInWrapper.js
    import React from 'react';
    import {Redirect, Route, Switch} from 'react-router-dom';
    import {withAuthGate} from '../lib'; // change to @ringcentral/react
    import Dashboard from './Dashboard';
    import {sdk} from './lib';
    
    const LoggedInWrapper = ({isAuthorized, authorizing, logout, match, location}) => {
        if (authorizing) {
            return <div>Loading...</div>;
        }
    
        if (!isAuthorized) {
            return (
                <Redirect
                    to={{
                        pathname: '/api/login',
                        state: {
                            from: location
                        }
                    }}
                />
            );
        }
    
        return (
            <div className="layout">
                <button type="button" onClick={logout}>
                    Log out
                </button>
                <Switch>
                    {/*<Route path={`${match.url}/profile/:userId`} exact component={Profile}/>*/}
                    <Route component={Dashboard} />
                </Switch>
            </div>
        );
    };
    
    export default withAuthGate({sdk, ensure: true})(LoggedInWrapper);

    And the actual proteceted page:

    // Dashboard.js
    import React from 'react';
    import {sdk} from './lib';
    
    export default class Dashboard extends React.Component {
        constructor(props) {
            super(props);
            this.state = {user: null, error: null};
        }
    
        async componentWillMount() {
            try {
                this.setState({
                    // we can send requests here since we're guarded by LoggedInWrapper
                    user: await (await sdk.get('/restapi/v1.0/account/~/extension/~')).json()
                });
            } catch (error) {
                this.setState({error});
            }
        }
    
        render() {
            const {error, user} = this.state;
            if (error) return <div>{error.message}</div>;
            if (!user) return <div>Loading</div>;
            return <pre>{JSON.stringify(user, null, 2)}</pre>;
        }
    }

    Keywords

    none

    Install

    npm i @ringcentral/react

    DownloadsWeekly Downloads

    79

    Version

    4.7.3

    License

    MIT

    Unpacked Size

    48.1 kB

    Total Files

    17

    Last publish

    Collaborators

    • kirill.konshin
    • ross.myers