Create this in /(pages)/_components/ProtectedDisplay/ProtectedDisplay.tsx
Create the scss module in the same folder
This task relies on useAuth to be completed. Since it won't be during the time of this task, just create a function called useAuth() that returns: { user, loading }, where you can just edit the settings yourself.
If loading, then display loadingDisplay
If done loading, then check if user exists. If not then display failDisplay
If done loading and user exists then just return the children.
[ ] Create
<ProtectedDisplay>
component that will be used like so:Create this in /(pages)/_components/ProtectedDisplay/ProtectedDisplay.tsx
Create the scss module in the same folder
This task relies on useAuth to be completed. Since it won't be during the time of this task, just create a function called
useAuth()
that returns:{ user, loading }
, where you can just edit the settings yourself.If loading, then display
loadingDisplay
If done loading, then check if user exists. If not then display
failDisplay
If done loading and user exists then just return the children.