🔐 Firebase Authentication Action Handler

Beautiful, Branded Authentication Experience for Firebase Apps

🌐 Live Example (working for https://turri.in.net): auth.turri.in.net
⭐ Star this repo if it helped you!

🎯 What is This?

A custom authentication action handler that provides a branded, professional experience for Firebase authentication actions. Instead of users seeing Firebase's generic pages, they get a beautiful, consistent experience on your domain.

✨ Before vs After

🚫 Firebase Default	✅ Your Branded Experience
Generic Firebase domain	Your custom domain
Basic styling	Beautiful dark/light mode
No branding	Consistent with your app
Poor mobile experience	Fully responsive

🚀 Features

🎨 Design & UX

✅ Dark/Light Mode - Auto-detects system preference
✅ Fully Responsive - Perfect on all devices
✅ Smooth Animations - Polished micro-interactions
✅ Clean Typography - Professional, readable fonts
✅ Consistent Branding - Matches your app's identity

🔐 Authentication Actions

✅ Password Reset - Secure password updates
✅ Email Verification - Confirm new accounts
✅ Email Change - Verify new email addresses
✅ Email Recovery - Restore compromised accounts
✅ Error Handling - Clear, helpful error messages

🛠️ How It Works

graph LR
    A[User clicks 'Forgot Password'] --> B[Firebase sends email]
    B --> C[Email contains link to your domain]
    C --> D[User clicks link]
    D --> E[Beautiful branded page loads]
    E --> F[User resets password]
    F --> G[Redirected back to main app]

🔄 User Journey

🔑 User Action - Clicks "Forgot Password" in your app
📧 Email Sent - Firebase sends email with custom action URL
🌐 Branded Experience - User lands on your custom domain
✨ Beautiful Interface - Clean, professional password reset form
🔒 Secure Processing - Firebase handles all security validation
↩️ Return Home - User redirected back to your app

⚡ Quick Start

1. Clone & Install

git clone https://github.com/your-username/firebase-auth-handler.git
cd firebase-auth-handler
npm install

2. Configure Firebase

Update src/firebase/config.ts with your Firebase credentials:

const firebaseConfig = {
  apiKey: "your-api-key",
  authDomain: "your-auth-domain",
  projectId: "your-project-id",
  // ... other config
};

3. Update Firebase Console

Set this URL in Firebase Console for ALL email templates:

https://your-domain.com/auth-action

4. Deploy

npm run build
# Deploy to Netlify, Vercel, or your preferred platform

⚙️ Firebase Console Setup

📋 Quick Setup Checklist

Open Firebase Console
Navigate to Authentication → Templates
Update Action URL for each template
Test with a real email

📖 Detailed Setup Instructions

Go to Firebase Console
```
https://console.firebase.google.com/
```
Select Your Project
- Choose your Firebase project
Navigate to Authentication
```
Authentication → Templates
```
Update Each Template
- Password Reset → Edit → Set Action URL
- Email Verification → Edit → Set Action URL
- Email Change → Edit → Set Action URL
- Email Recovery → Edit → Set Action URL
Save Changes
- Click "Save" for each template

🔧 Supported Authentication Actions

Action Type	Firebase Mode	When Used	User Experience
Password Reset	`resetPassword`	User forgot password	Secure password update form
Email Verification	`verifyEmail`	New account signup	One-click email confirmation
Email Change	`verifyAndChangeEmail`	User changes email	Verify new email address
Email Recovery	`recoverEmail`	Account compromise	Restore original email

🌐 URL Structure & Parameters

📝 Example URLs

# Password Reset
https://your-domain.com/auth-action?mode=resetPassword&oobCode=ABC123&continueUrl=https://your-app.com

# Email Verification  
https://your-domain.com/auth-action?mode=verifyEmail&oobCode=XYZ789&continueUrl=https://your-app.com

# Email Change
https://your-domain.com/auth-action?mode=verifyAndChangeEmail&oobCode=DEF456&continueUrl=https://your-app.com

🔍 Parameter Reference

Parameter	Required	Description	Example
`mode`	✅	Authentication action type	`resetPassword`
`oobCode`	✅	One-time action code from Firebase	`ABC123...`
`continueUrl`	❌	Redirect URL after completion	`https://your-app.com`
`lang`	❌	Language code for localization	`en`

💻 Development

📁 Project Structure

src/
├── components/
│   ├── AuthAction.tsx      # Main auth action handler
│   ├── AuthHandler.tsx     # URL parameter parser
│   ├── DarkModeToggle.tsx  # Theme switcher
│   └── NotFound.tsx        # 404 page
├── firebase/
│   └── config.ts           # Firebase configuration
├── hooks/
│   └── useDarkMode.ts      # Dark mode logic
├── App.tsx                 # Main application
└── main.tsx               # Entry point

🚀 Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

# Lint code
npm run lint

🚀 Deployment

📦 Netlify (Recommended)

This project is optimized for Netlify with automatic SPA routing:

# Build the project
npm run build

# Deploy to Netlify
# The netlify.toml file handles all configuration

🔧 Other Platforms

Vercel: Works out of the box
GitHub Pages: Requires additional SPA routing setup
Firebase Hosting: Perfect integration with Firebase

🔒 Security Features

🛡️ Security Layer	✅ Implementation
HTTPS Required	All production URLs use HTTPS
Firebase Validation	All action codes validated before processing
No Data Exposure	Sensitive data never exposed in errors
Secure Redirects	Only trusted domains for redirects
Input Validation	All form inputs properly validated

🎨 Design System

🌓 Theme Colors

🌞 Light Mode

Background: Pure White
Cards: White with Gray Borders
Text: Black Headings, Gray Body
Buttons: Black with White Text
Icons: Black Backgrounds

🌙 Dark Mode

Background: Pure Black
Cards: Dark Gray with Gray Borders
Text: White Headings, Light Gray Body
Buttons: White with Black Text
Icons: White Backgrounds

📱 Responsive Design

Mobile First: Optimized for mobile devices
Flexible Layouts: Adapts to all screen sizes
Touch Friendly: Large tap targets for mobile
Fast Loading: Optimized images and assets

🤝 Contributing

We welcome contributions! Here's how you can help:

🐛 Bug Reports

Check existing issues first
Use the issue template
Include screenshots
Provide reproduction steps

✨ Feature Requests

Describe the use case
Explain the expected behavior
Consider backward compatibility

🔧 Pull Requests

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📊 Browser Support

Browser	Version	Status
Chrome	90+	✅ Fully Supported
Firefox	88+	✅ Fully Supported
Safari	14+	✅ Fully Supported
Edge	90+	✅ Fully Supported

🔗 Related Projects

Firebase Documentation - Official Firebase Auth docs
React Firebase Hooks - React hooks for Firebase
Tailwind CSS - Utility-first CSS framework

📞 Support & Community

Need Help?

📧 Issues	💬 Discussions	🌟 Star
Report Bug	Join Discussion	Star Repo

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT License

Copyright (c) 2024 Your Name

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

⭐ Star this repository if it helped you!

Made with ❤️ for the Firebase community

🔝 Back to Top

Name		Name	Last commit message	Last commit date
Latest commit History 25 Commits
.bolt		.bolt
public		public
src		src
.gitignore		.gitignore
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
netlify.toml		netlify.toml
package-lock.json		package-lock.json
package.json		package.json
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

jigneshis/Firebase-Authentication-Action-Handler

Folders and files

Latest commit

History

Repository files navigation