Creating a custom login system can enhance the user experience and provide more control over authentication processes. Combining SolidJS, a reactive JavaScript library, with Firebase Authentication offers a powerful solution for modern web applications. This guide walks you through building a simple, secure login system using these technologies.

Prerequisites

  • Basic knowledge of JavaScript and React-like frameworks
  • Firebase account and a project set up
  • Node.js and npm installed on your development machine
  • Familiarity with SolidJS fundamentals

Setting Up Firebase

First, create a Firebase project in the Firebase Console. Enable Email/Password authentication in the Authentication section. Then, add your web app to the project and copy the Firebase configuration details, which you'll need later.

Initialize Firebase in Your Project

Install Firebase SDK via npm:

npm install firebase

Then, create a firebase.js file to initialize Firebase:

import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID"
};

const app = initializeApp(firebaseConfig);
export default app;

Building the SolidJS Login Component

Next, create a Login component that handles user input and authentication.

import { createSignal } from 'solid-js';
import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';

function Login() {
  const auth = getAuth();
  const [email, setEmail] = createSignal('');
  const [password, setPassword] = createSignal('');
  const [error, setError] = createSignal('');

  const handleLogin = async () => {
    try {
      await signInWithEmailAndPassword(auth, email(), password());
      alert('Login successful!');
    } catch (err) {
      setError(err.message);
    }
  };

  return (
    

      
Login

       setEmail(e.target.value)}
      />
       setPassword(e.target.value)}
      />
      
      {error() && 
{error()}
}
    

  );
}

export default Login;

Implementing User Registration

To allow new users to sign up, add a registration function using Firebase's createUserWithEmailAndPassword method.

import { createSignal } from 'solid-js';
import { getAuth, createUserWithEmailAndPassword } from 'firebase/auth';

function Register() {
  const auth = getAuth();
  const [email, setEmail] = createSignal('');
  const [password, setPassword] = createSignal('');
  const [message, setMessage] = createSignal('');

  const handleRegister = async () => {
    try {
      await createUserWithEmailAndPassword(auth, email(), password());
      setMessage('Registration successful! You can now log in.');
    } catch (err) {
      setMessage(err.message);
    }
  };

  return (
    

      
Register

       setEmail(e.target.value)}
      />
       setPassword(e.target.value)}
      />
      
      {message() && 
{message()}
}
    

  );
}

export default Register;

Managing Authentication State

Use Firebase's onAuthStateChanged to monitor user login status and update your UI accordingly.

import { createSignal, onMount } from 'solid-js';
import { getAuth, onAuthStateChanged } from 'firebase/auth';

function AuthStatus() {
  const auth = getAuth();
  const [user, setUser] = createSignal(null);

  onMount(() => {
    onAuthStateChanged(auth, (u) => {
      setUser(u);
    });
  });

  return (
    

      {user() ? (
        
Welcome, {user().email}

      ) : (
        
Please log in.

      )}
    

  );
}

export default AuthStatus;

Securing Routes and User Logout

Implement a logout function to sign out users and protect routes based on authentication status.

import { getAuth, signOut } from 'firebase/auth';

function Logout() {
  const auth = getAuth();

  const handleLogout = () => {
    signOut(auth)
      .then(() => alert('Logged out successfully'))
      .catch((error) => alert(error.message));
  };

  return ;
}

export default Logout;

Conclusion

Integrating SolidJS with Firebase Authentication provides a flexible and scalable way to manage user authentication in your web applications. With these building blocks, you can create a secure, user-friendly login system tailored to your needs.