How to Intergrade authentication in web app (special way)

Merry Christmas everyone, im making a web app, where you can make a booking time for a store like a barber, but im having trouble on deciding how to integrate the authentication, because i want for the user to be able to choose the date and time and then let him choose if he wants to create an account or log in or make the booking as a guest to the site. But on the other side there is also the initial view.

So the main problem, is how to distinguish if the user is signed in or not

An example of this is the amazon site, where you can do everything except completing the order not signed in but when you go to make an order it askes you to sign in or create an account but if you are signed in it just goes on to completing the order.

  1. to do it i have thought of to ways, the one is to check everywhere if the user is signed in and based on that show the options (but this way doesnt use the initial view)
  2. And the other ia to create two sets of each page, where the one page will be if youre signed in and the other if you are not

I hope you understand what i mean.

Hi Man!

Maybe you can create a local bank with username, login date and another information field that can tell how long the login lives.

Hi thanks for the help, actually for that part, i dont need it to automatically log out i just need a way of recognizing when a user is logged in.
To tell you the truth, i thought maybe using the id token of firebase and depending on that if its correct i can show or hide the different options, This way of course the initial view is not going to be used.
The only question i have is for the “security” aspect of this way, meaning how secure wise, is to show and hide components based on whether or not the id token of firebase is valid.