Does this skill support multiple OAuth providers?

Yes, while the core patterns focus on Google, the implementation logic is easily adaptable for GitHub, Facebook, and other Firebase-supported OAuth providers.

Does it handle user profile creation in Firestore?

Yes, the sign-up and OAuth flows include logic to automatically create or update a corresponding user document in Firestore to store additional metadata.

How is session persistence handled in these patterns?

The skill utilizes Firebase's onAuthStateChanged observer combined with secure cookies to ensure sessions persist across page reloads and are accessible to server-side middleware.

Is this compatible with the Next.js App Router?

Absolutely. The patterns include specific implementations for Next.js middleware and 'use client' components designed to work seamlessly with the App Router.

Firebase Authentication Patterns

Name: Firebase Authentication Patterns
Author: Agentient

byAgentient

0•

Security & Testing

Implements secure Firebase Authentication flows including OAuth, session management, and server-side protected routes.

This skill provides a comprehensive set of implementation patterns for Firebase Authentication, enabling developers to quickly set up secure user management systems. It covers everything from standard email/password sign-up flows and Google OAuth integration to advanced session management using React Context and Next.js middleware. By following these standardized patterns, developers can ensure their applications handle authentication tokens securely via HttpOnly cookies, provide user-friendly error messages for Firebase-specific exceptions, and maintain consistent user profiles across Firestore and the Auth service.

Key Features

01Next.js middleware patterns for server-side route protection

020 GitHub stars

03Email and password authentication with validation

04React AuthProvider for global session state management

05Google OAuth sign-in with automatic Firestore profile creation

06User-friendly mapping for Firebase authentication error codes

Use Cases

01Building a secure user registration and login system for a web application

02Implementing protected dashboard routes that require server-side token verification

03Adding social login providers like Google to an existing project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit firebase-authentication-patterns

For use in Claude.ai and ChatGPT

Key Features

01Next.js middleware patterns for server-side route protection

020 GitHub stars

03Email and password authentication with validation

04React AuthProvider for global session state management

05Google OAuth sign-in with automatic Firestore profile creation

06User-friendly mapping for Firebase authentication error codes

Use Cases

01Building a secure user registration and login system for a web application

02Implementing protected dashboard routes that require server-side token verification

03Adding social login providers like Google to an existing project

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add agentient/vibekit firebase-authentication-patterns

For use in Claude.ai and ChatGPT