Blockstack Authentication for ReactJS Apps Using Hooks

app-blockstack-auth.js

import React, { useCallback }  from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { Connect } from '@blockstack/connect';
import ReactBlockstack, { useBlockstack, didConnect } from 'react-blockstack';
import { appConfig } from './assets/constants';
import Layout from './Components/Layout';
import GuestBook from './Components/GuestBook';

ReactBlockstack({ appConfig });

const App = props => {

  // const { showOnBoard } = props;
  const { userSession } = useBlockstack();

  const finished = useCallback(() => {
    didConnect({ userSession });
  }, [userSession]);

  const authOptions = {
    redirectTo: '/',
    finished,
    appDetails: {
      name: 'BlockStack Guest Book',
      icon: `${window.location.origin}/register.svg`,
    },
    userSession,
  };

  return (
      <Connect authOptions={authOptions}>
          <Layout>
            <Switch>
              <Route exact path="/guest-book" component={GuestBook}>
                <Redirect to="/guest-book" />
              </Route>
            </Switch>
          </Layout>
      </Connect>
  );
}

export default App;

layout-blockstack-auth.js

import React from "react";
import { useBlockstack } from 'react-blockstack';
import SignIn from './SignIn'
import GuestBook from './GuestBook'

function Layout () {
    const { authenticated } = useBlockstack();

    return (
        <div>
            {authenticated ? (
                <div>
                    <GuestBook />
                    
                </div>
            ) : (
                <SignIn />
            )}
        </div>
    )
}

export default Layout;

sign-blockstack-auth.js

import React from 'react';
import { Link } from 'react-router-dom';
import { useConnect } from '@blockstack/connect';

const SignIn = () => {
  
    const { doOpenAuth } = useConnect();
    const onClick = () => {
      doOpenAuth();
    };
  

  return (
          <div>
              <button onClick={onClick}>Sign In</button>
          </div>
  );
}

export default SignIn;

signout-blockstack-auth.js

import React from 'react';
import { Link } from 'react-router-dom';
import { useBlockstack } from 'react-blockstack';


const SignIn = () => {
  
    const { signOut } = useBlockstack();
  

  return (
          <div>
              <button onClick={() => { signOut()}}>Sign In</button>
          </div>
  );
}

export default SignIn;