Restrict app access to anonymous users

[eva-lng]

	Type
✓	New Feature
✓	Restrict app access to anonymous users

Description

Whenever an anonymous user visits the site, they only see a prompt message and a Sign In button. In the navbar, only Home and About links are visible.

Changes in the code

A new About view was added to the app. It is accessible from the navbar and has a routing set up in App.jsx. in Layout.jsx the header was adjusted and now displays the app logo and a Sign In / Sign Out button. To the navbar in Layout.jsx a link for About section was added. Links in navbar and content in Home view are rendered conditionally based on whether the user is logged in or not.

Related Issue

closes #30

Acceptance Criteria

• A new About view is accessible from the navbar
• The homepage displays only a welcoming message and a prompt to log in or sign up when the user is not authenticated
• The navbar only shows links to the homepage and about sections for non-authenticated users

Type of Changes

enhancement

Updates

Homepage when logged out

Homepage when logged in

Testing Steps / QA Criteria

• npm start
• navigate to the app and log out, only Home and About should be accessible
• log in, the rest of the app should become accessible

[github-actions]

Visit the preview URL for this PR (updated for commit 14d5e0c):

https://tcl-78-smart-shopping-list--pr31-el-restricted-access-8egghq7c.web.app

_{(expires Tue, 01 Oct 2024 18:59:49 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: c781903507c1507075d7a974036959ddeec29c0a}

[didemydn]

Thanks Eva!

[Amaka202]

Well done Eva! I totally like the idea yll propose for your app with the about page and yes! to hiding the other links to non signed in users! 💥💚