Joshscorp

<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-animated-pages/core-animated-pages.html">
<link rel="import" href="../core-animated-pages/transitions/hero-transition.html">
<link rel="import" href="../core-animated-pages/transitions/cross-fade.html">
<link rel="import" href="../core-animated-pages/transitions/slide-down.html">
<link rel="import" href="../core-animated-pages/transitions/slide-up.html">
<link rel="import" href="../core-animated-pages/transitions/tile-cascade.html">

Joshscorp

import * as onz from 'onz-auth';

// Initialisation
const auth = new onz.Auth({
    clientID: 'YOUR CLIENT ID ABOVE', //Replace with your client id
    containerID: 'myLoginDiv', // Optional, defaults to 'container'
    isIframe: false, // Optional, defaults to 'false'
});

Joshscorp

import { useEffect, useState } from 'react';

async function loadServerToken(accessToken) {
    return fetch('http://localhost:8080/adminInfo', {
        method: 'GET',
        headers: new Headers({
            'Authorization': `Bearer ${accessToken}`
        }), 
    })
    .then(data => {

Joshscorp

import React from 'react';

export default function PublicPage() {
  return (
    <>
      <h2>Public Page</h2>
      <div>You are not logged in. </div>
    </>
  );
}

Joshscorp

import React from 'react';
import { Navigate } from 'react-router-dom';

export default function ProtectedRoute({ user, children }) {
    if (!user) {
        return <Navigate to="/" replace />;
    }
    return children;
}

Joshscorp

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>

Joshscorp

import './App.css';
import React, { useState, useEffect } from 'react';
import { Route, Routes, useNavigate } from 'react-router-dom';
import ProtectedPage from './components/ProtectedPage/ProtectedPage';
import PublicPage from './components/PublicPage/PublicPage';
import ProtectedRoute from './components/ProtectedRoute/ProtectedRoute';
import * as onz from 'onz-auth';

Joshscorp

const [ user, setUser ] = useState(null);
const [ isLoggingIn, setIsLoggingIn ] = useState(false);
const [ isLoggedIn, setIsLoggedIn ] = useState(auth.isAuthenticated());
const navigate = useNavigate();
const handleLogin = () => {
    setIsLoggingIn(true);
    auth.showLogin();
};
const handleLogout = () => auth.logout();
const handleCancelLogin = () => auth.close();

Joshscorp

useEffect(() => {
    if (isLoggedIn) {
      updateUserTokens();
      navigate('/protected');
    }
 }, [isLoggedIn, navigate]);

Joshscorp

function updateUserTokens() {
    const accessToken = auth.getAccessToken();
    const accessTokenJwt = auth.getDecodedAccessToken();
    const idTokenJwt = auth.getDecodedIDToken();
    setUser({
      accessToken: accessToken,
      accessTokenJwt: accessTokenJwt,
      idTokenJwt: idTokenJwt
    });
}