Description

Implement authentication for the Tanam web application using firebaseui-web. The authentication should only support sign-in with Google. The site should be accessible only if the user is signed in, and upon successful sign-in, the user should be redirected to the landing page.

Requirements

1. FirebaseUI Implementation

   • Use firebaseui-web to handle authentication.
   • Implement only Google sign-in.

2. Access Control

   • Ensure the site is accessible only to authenticated users.
   • Redirect unauthenticated users to the sign-in page.

3. Post-Sign-In Redirection

   • Redirect signed-in users to the landing page.

Steps to Implement

1. Install FirebaseUI

   • Install the necessary Firebase and FirebaseUI packages.

2. Configure Firebase

   • Initialize Firebase in your project with your Firebase project's configuration.

3. Set Up FirebaseUI

   • Configure FirebaseUI to handle authentication, ensuring that only Google sign-in is enabled. Set the post-sign-in redirect URL to the landing page.

4. Create Sign-In Page

   • Create a sign-in page that integrates FirebaseUI, allowing users to sign in with Google.

5. Protect Routes

   • Implement a mechanism to protect routes, ensuring that only authenticated users can access the site. Redirect unauthenticated users to the sign-in page.

6. Apply Authentication Protection

   • Apply the authentication protection to all relevant pages, ensuring that the site is only accessible to signed-in users.

7. Landing Page

   • Create a landing page that users are redirected to upon successful sign-in.

Additional Notes

• Ensure to handle any edge cases, such as network issues or user sign-out scenarios.
• You may expand the authentication options in the future by adding more providers if needed.

References

• FirebaseUI Web GitHub Repository
• Next.js Authentication Example