Uproszczenie procesu aktualizacji poczty e-mail użytkownika dzięki Magic Links w Next.js

Usprawnienie przepływów uwierzytelniania

Aktualizowanie adresów e-mail użytkowników w aplikacjach internetowych może być często uciążliwym procesem, szczególnie w przypadku wykorzystywania magicznych łączy do uwierzytelniania. Takie podejście, choć bezpieczne, może czasami pogarszać komfort użytkownika, wymagając wielu kroków, które wydają się zbędne lub niepotrzebne. Wyzwanie staje się jeszcze bardziej widoczne na platformach zbudowanych w oparciu o Next.js, gdzie adresy e-mail stanowią integralną część tokenów JWT używanych do uwierzytelniania. Ponieważ użytkownicy są proszeni o przeglądanie serii e-maili weryfikacyjnych w celu aktualizacji swoich danych uwierzytelniających, proces ten może wydawać się niepotrzebnie skomplikowany.

Nasuwa się pytanie: czy istnieje prostszy sposób na ułatwienie aktualizacji e-maili bez bombardowania użytkowników trzema e-mailami w celu weryfikacji i ponownego uwierzytelnienia? Nacisk przesuwa się w kierunku poprawy doświadczenia użytkownika poprzez możliwie konsolidację tych kroków lub wyeliminowanie potrzeby powtarzalnych działań. Chociaż Firebase zapewnia niezawodne interfejsy API do obsługi aktualizacji haseł i innych zadań związanych z uwierzytelnianiem, opcje usprawnienia łączy logowania, zwłaszcza w przypadku aktualizacji e-maili, wydają się ograniczone. Poszukiwanie bardziej przyjaznego dla użytkownika podejścia bez narażania bezpieczeństwa jest w centrum tej dyskusji.

Usprawnianie przepływu aktualizacji e-maili w Firebase za pomocą Magic Links

Skrypt zaplecza opracowany przy użyciu Node.js i pakietu Firebase Admin SDK tworzy solidną platformę do zarządzania aktualizacjami poczty e-mail użytkowników za pomocą niestandardowych magicznych łączy, znacznie poprawiając wygodę użytkownika, minimalizując potrzebę wielokrotnej weryfikacji poczty elektronicznej. Podstawą tej konfiguracji jest polecenie admin.initializeApp(), które inicjuje aplikację Firebase, co ma kluczowe znaczenie dla umożliwienia operacji zaplecza za pomocą usług Firebase. Prawdziwa magia zaczyna się od funkcji admin.auth().createCustomToken(), która generuje niestandardowy token do uwierzytelnienia. Ten niestandardowy token może zawierać dodatkowe oświadczenia, takie jak nowy adres e-mail, na który użytkownik chce dokonać aktualizacji. Osadzając ten nowy adres e-mail jako żądanie w tokenie, tworzymy płynne połączenie pomiędzy prośbą o aktualizację wiadomości e-mail a stanem uwierzytelnienia użytkownika.

Na froncie, używając Next.js, skrypt wykorzystuje możliwości pakietu SDK po stronie klienta Firebase do przetwarzania niestandardowego magicznego łącza. Funkcja firebase.initializeApp() ponownie odgrywa kluczową rolę, przygotowując grunt pod wszystkie kolejne operacje Firebase w aplikacji klienckiej. Gdy użytkownik kliknie magiczne łącze, metoda firebase.auth().signInWithCustomToken() pobiera niestandardowy token z łącza, loguje użytkownika i natychmiast pobiera z tokenu nowe oświadczenie e-mail. Informacje te umożliwiają natychmiastową aktualizację adresu e-mail użytkownika za pomocą funkcji user.updateEmail() bez konieczności podejmowania jakichkolwiek dalszych działań ze strony użytkownika. Ten usprawniony proces nie tylko poprawia bezpieczeństwo, weryfikując intencje użytkownika już po pierwszym kliknięciu, ale także znacząco poprawia komfort użytkownika, redukując liczbę kroków niezbędnych do aktualizacji adresu e-mail w systemie.

const admin = require('firebase-admin');
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json());
// Initialize Firebase Admin SDK
admin.initializeApp({ ... });
// Endpoint to create a custom magic link
app.post('/create-custom-magic-link', async (req, res) => {
  const { currentEmail, newEmail, uid } = req.body;
  try {
    // Generate a custom token with claims
    const customToken = await admin.auth().createCustomToken(uid, { newEmail });
    res.json({ customToken });
  } catch (error) {
    res.status(500).send(error.message);
  }
});
app.listen(3000, () => console.log('Server started on port 3000'));

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import firebase from 'firebase/app';
import 'firebase/auth';
// Configure Firebase (the config object should already be set up)
if (!firebase.apps.length) {
  firebase.initializeApp({ ... });
}
const useCustomMagicLink = () => {
  const router = useRouter();
  useEffect(() => {
    if (router.query.customToken) {
      firebase.auth().signInWithCustomToken(router.query.customToken)
        .then((userCredential) => {
          // Update the user's email here using the claim
          const newEmail = userCredential.user.claims.newEmail;
          userCredential.user.updateEmail(newEmail).then(() => {
            // Email updated successfully
          }).catch((error) => {
            // Handle error
          });
        }).catch((error) => {
          // Handle error
        });
    }
  }, [router]);
};

Ulepszanie przepływów uwierzytelniania za pomocą Magic Links

Magiczne łącza zapewniają usprawnioną i bezpieczną metodę uwierzytelniania użytkowników, szczególnie w nowoczesnych aplikacjach internetowych, takich jak te zbudowane w Next.js. Wykorzystując magiczne linki, programiści mogą wyeliminować potrzebę zapamiętywania haseł przez użytkowników, zmniejszając w ten sposób trudności związane z procesem logowania. W ten sposób do użytkowników wysyłany jest unikalny, jednorazowy link pocztą elektroniczną, który po kliknięciu bezpośrednio uwierzytelnia użytkownika. Wyzwanie polega jednak na aktualizowaniu wiadomości e-mail użytkowników bez konieczności wykonywania wielu etapów uwierzytelniania, co może pogorszyć wygodę użytkownika. Rozwiązanie polega na utworzeniu usługi backendu, która generuje niestandardowy token za pomocą pakietu Firebase Admin SDK oraz frontendu, który odpowiednio obsługuje ten token.

Skrypt zaplecza wykorzystuje Node.js i pakiet SDK administratora Firebase do utworzenia punktu końcowego, który generuje token niestandardowy. Token ten obejmuje roszczenia, takie jak nowy adres e-mail, i jest wysyłany na bieżący adres e-mail użytkownika. Gdy użytkownik kliknie link zawierający niestandardowy token, frontend zbudowany w Next.js przechwytuje ten token. Korzystając z uwierzytelniania Firebase, skrypt frontonu loguje użytkownika za pomocą tego niestandardowego tokenu i aktualizuje adres e-mail użytkownika w Firebase na podstawie żądania zawartego w tokenie. Ten proces ogranicza liczbę kroków wymaganych do aktualizacji e-mailem, poprawiając ogólne doświadczenie użytkownika, minimalizując potrzebę wielokrotnych weryfikacji i logowania.