+ Profile
+
{roles.teacherRole && (
-
+
Welcome back Teacher!
-
You have 50+ students currently 🧑🎓
+
You have 50+ students currently 🧑🎓
)}
{roles.studentRole && (
-
+
Welcome back Student!
-
Unlucky! You have homework!
-
+
Unlucky! You have homework!
+
)}
- )
+ );
}
-
-export default Dashboard;
\ No newline at end of file
+export default Dashboard;
diff --git a/client/src/components/Home.js b/client/src/components/Home.js
index 51d3646..91a198f 100644
--- a/client/src/components/Home.js
+++ b/client/src/components/Home.js
@@ -1,27 +1,37 @@
import '../App.css';
-import { useEffect } from "react";
-import { Link } from "react-router-dom";
-import { useSession } from '@descope/react-sdk'
-import { useNavigate } from "react-router-dom";
+import { Link, Navigate } from 'react-router-dom';
+import { useSession } from '@descope/react-sdk';
function Home() {
- const { isAuthenticated } = useSession()
- const navigate = useNavigate()
+ const { isAuthenticated, isSessionLoading } = useSession();
- useEffect(() => {
- if (isAuthenticated) {
- return navigate("/profile");
- }
- }, [isAuthenticated]) // listen for when isAuthenticated has changed
+ if (isSessionLoading) {
+ return (
+
+ );
+ }
+
+ if (isAuthenticated) {
+ return
;
+ }
return (
-
-
Home
-
Login
-
+
+
Home
+
- )
+ );
}
-
export default Home;
diff --git a/client/src/components/Login.js b/client/src/components/Login.js
index 9f28a1e..7fc1e51 100644
--- a/client/src/components/Login.js
+++ b/client/src/components/Login.js
@@ -1,45 +1,50 @@
import '../App.css';
-import React, { useEffect } from "react";
-import { Descope, useSession, useUser } from '@descope/react-sdk'
-import { useNavigate } from "react-router-dom";
-
+import React, { useEffect } from 'react';
+import { Descope, useSession, useUser } from '@descope/react-sdk';
+import { useNavigate } from 'react-router-dom';
function Login() {
- // isAuthenticated: boolean - is the user authenticated?
- // isSessionLoading: boolean - Use this for showing loading screens while objects are being loaded
- const { isAuthenticated, isSessionLoading } = useSession()
- // isUserLoading: boolean - Use this for showing loading screens while objects are being loaded
- const { isUserLoading } = useUser()
- const navigate = useNavigate()
+ const { isAuthenticated, isSessionLoading } = useSession();
+ const { isUserLoading } = useUser();
+ const navigate = useNavigate();
useEffect(() => {
if (isAuthenticated) {
- return navigate("/profile");
+ navigate('/profile');
}
- }, [isAuthenticated]) // listen for when isAuthenticated has changed
+ }, [isAuthenticated, navigate]);
- return (
-
- {
- (isSessionLoading || isUserLoading) &&
Loading...
- }
+ if (isSessionLoading || isUserLoading) {
+ return (
+
+ );
+ }
+
+ if (isAuthenticated) {
+ return (
+
+ );
+ }
- {!isAuthenticated &&
- (
- <>
-
Login/SignUp to see the Secret Message!
-
console.log(e.detail.user)}
- onError={(e) => console.log('Could not log in!')}
- theme="light"
- />
-
- )
- }
+ return (
+
+
Login/SignUp to see the Secret Message!
+ {
+ console.log(e.detail.user);
+ }}
+ onError={(err) => {
+ console.log('Error!', err);
+ }}
+ />
- )
+ );
}
-
export default Login;
diff --git a/client/src/components/Profile.js b/client/src/components/Profile.js
index 45d6d71..364e413 100644
--- a/client/src/components/Profile.js
+++ b/client/src/components/Profile.js
@@ -1,76 +1,109 @@
import '../App.css';
-import { useState, useEffect, useCallback } from "react";
-import { useDescope, useUser, getSessionToken, useSession } from '@descope/react-sdk'
-import { useNavigate } from "react-router-dom";
-import { Link } from "react-router-dom";
-
+import { useState, useEffect, useCallback } from 'react';
+import { useDescope, useUser, getSessionToken, useSession } from '@descope/react-sdk';
+import { useNavigate, Link } from 'react-router-dom';
function Profile() {
- const { isSessionLoading } = useSession()
-
- const { user } = useUser()
- const { logout } = useDescope()
- const navigate = useNavigate()
+ const { isSessionLoading, isAuthenticated, sessionToken } = useSession();
+ const { user, isUserLoading } = useUser();
+ const { logout } = useDescope();
+ const navigate = useNavigate();
const [secret, setSecret] = useState({
- secret: "",
- roles: []
- })
-
- const sessionToken = getSessionToken(); // get the session token
+ secret: '',
+ roles: [],
+ });
const logoutUser = useCallback(async () => {
- await logout()
- return navigate('/login')
+ await logout();
+ navigate('/login');
}, [logout, navigate]);
useEffect(() => {
- fetch('/get_roles', { // call the api endpoint from the flask server
+ if (isSessionLoading || isUserLoading) return;
+ if (!isAuthenticated) {
+ navigate('/login');
+ return;
+ }
+
+ const token = sessionToken || getSessionToken();
+ if (!token) {
+ navigate('/login');
+ return;
+ }
+
+ fetch('/get_roles', {
headers: {
Accept: 'application/json',
- Authorization: 'Bearer ' + sessionToken,
- }
- }).then(data => {
- if (data.status === 401) {
- navigate('/login')
- }
- return data.json()
- }).then(jsonData => {
- setSecret({
- secret: jsonData.secretMessage,
- roles: jsonData.roles
- })
- }).catch((err) => {
- console.log(err)
- navigate('/login')
+ Authorization: `Bearer ${token}`,
+ },
})
- }, [])
+ .then((data) => {
+ if (data.status === 401) {
+ navigate('/login');
+ return null;
+ }
+ return data.json();
+ })
+ .then((jsonData) => {
+ if (!jsonData) return;
+ setSecret({
+ secret: jsonData.secretMessage,
+ roles: jsonData.roles,
+ });
+ })
+ .catch(() => {
+ navigate('/login');
+ });
+ }, [isSessionLoading, isUserLoading, isAuthenticated, sessionToken, navigate]);
+
+ if (isSessionLoading || isUserLoading) {
+ return (
+
+ );
+ }
+
+ if (!isAuthenticated || !user) {
+ return null;
+ }
return (
- <>
- {user && (
-
-
-
Hello {user.name} 👋
-
My Private Component
-
Secret Message: {secret.secret}
-
Your Role(s):
- {!secret.roles || secret.roles.length === 0 ?
-
No role found!
- :
- secret.roles.map((role, i) => (
-
{role}
- ))
- }
-
Home
-
Dashboard
-
Logout
-
-
+
+
Hello {user.name} 👋
+
My Private Component
+
+ Secret Message:{' '}
+
+ {secret.secret}
+
+
+
Your Role(s):
+ {!secret.roles || secret.roles.length === 0 ? (
+
+ No role found!
+
+ ) : (
+ secret.roles.map((role, i) => (
+
+ {role}
+
+ ))
+ )}
+
+ Home
+
+
+ Dashboard
+
+
+ Logout
+
+
+
-
-
-
-);
+
+if (!isValidDescopeProjectId(projectId)) {
+ root.render(
+
+
+ );
+} else {
+ root.render(
+
+
+
+
+ );
+}
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))