-
Notifications
You must be signed in to change notification settings - Fork 13
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add routing to dashboard and create a basic Auth page #2
Conversation
src/components/pages/Auth/Auth.tsx
Outdated
<h2>Log in to Dashboard</h2> | ||
<button onClick={promptForApiKey}>Insert your API Key</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We dont need to have any user interaction here, on page open just show them an alert or something with an input in it
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated
src/components/pages/Auth/Auth.tsx
Outdated
const apiKey = prompt("Please enter your API key"); | ||
if (apiKey !== null && apiKey.length !== 0) { | ||
setValueToStorage(apiKeyLocalStorageKey, apiKey); | ||
setApiKey(apiKey); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why do we need this?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Not needed anymore, it was needed for redirection
import React, { useEffect } from "react"; | ||
import { Navigate, Outlet } from "react-router-dom"; | ||
|
||
import { apiKeyLocalStorageKey } from "../../../constants"; | ||
import { getValueFromStorage } from "../../../storageService"; | ||
|
||
const ProtectedRoute = () => { | ||
const [shouldRedirect, setShouldRedirect] = React.useState(false); | ||
|
||
useEffect(() => { | ||
const apiKey = getValueFromStorage(apiKeyLocalStorageKey); | ||
if (apiKey === null || apiKey.length === 0) { | ||
setShouldRedirect(true); | ||
} | ||
}, []); | ||
|
||
if (shouldRedirect) { | ||
return <><Navigate to="/" /></>; | ||
} | ||
|
||
return <Outlet />; | ||
}; | ||
|
||
export default ProtectedRoute; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just have an HOC that checks for the API key and renders a child if its found or redirects to "/" if it doesnt. Dont rely this heavily on the router
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated
|
||
// return to dashboard home once apiKey is stored in localStorage | ||
if (apiKey.length > 0) { | ||
return <Navigate to="/home" /> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Just use window API please
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated
src/index.tsx
Outdated
root.render( | ||
<React.StrictMode> | ||
<App /> | ||
<BrowserRouter basename="/auth/dashboard"> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Use the variable here
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Updated
Closing due to #3 |
fix: dropdown flicker on user list #2
Changes made
react-router-dom
Auth
component served on<apiBasePath>/dashboard
routeapiKey
value from LocalStorageapiKey
<apiBasePath>/dashboard/home
apiKey
value is not present in localStorage<apiBasePath>/dashboard/home