Why I Ditched Deep Linking for a Token-Based Password Reset in Supabase

The Problem

Recently, I was facing a major headache trying to implement a seamless password reset flow using deep linking. The process of managing deep links across various platforms became more complex than I had anticipated, leading to a less-than-ideal user experience.

• Complexity Across Platforms: Deep linking often requires platform-specific configurations (iOS vs. Android) that can lead to inconsistent behavior, whereas OTP-based resets use a uniform process via email.
• Security Risks: Improperly managed deep links can expose vulnerabilities, while OTPs are time-sensitive and randomly generated, offering a more secure approach.
• User Confusion: Deep linking can result in broken or misrouted links that confuse users; OTPs provide clear, straightforward instructions for resetting passwords.
• Maintenance Overhead: Managing deep links involves extra coding and constant updates for compatibility, whereas OTP-based systems integrate smoothly with platforms like Supabase, reducing maintenance effort.
• Reliability Issues: Deep links may fail if the app isn’t installed or misconfigured, but OTPs work independently of the app’s state, ensuring a consistent reset experience for all users.

I'll share my journey of ditching deep linking in favor of a secure, token-based reset flow. I'll walk you through how I customized the email template, triggered the reset email, and built a straightforward UI for users to enter their token and new password.

Let's dive in and see how this change transformed my approach to handling password resets.

---

Email Template

When users forget their passwords, a smooth and secure reset process is crucial. Supabase made this easier by letting me customize their email templates. I started by heading to Authentication > Email Templates in the Supabase dashboard and editing the "Reset Password" template. I used this simple HTML:

<h2>Reset Password</h2>
<p>Follow the instructions below to reset your password:</p>
<p>Enter the token below in the app:</p>
<p><strong>{{ .Token }}</strong></p>

Supabase automatically replaces {{ .Token }} with a unique token.

Integrating the Reset Flow in My App

Sending the Reset Email

I used the Supabase client to trigger the reset email when a user enters their email:

import { supabase } from './supabaseClient';

async function sendResetPasswordEmail(email) {
  const { error } = await supabase.auth.resetPasswordForEmail(email);
  if (error) {
    console.error('Error:', error.message);
  } else {
    console.log('Reset email sent!');
  }
}

Building the Reset Form

Next, I built a simple React component to let users enter their token and new password:

import React, { useState } from 'react';
import { supabase } from './supabaseClient';

const ResetPasswordForm = () => {
  const [token, setToken] = useState('');
  const [newPassword, setNewPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleReset = async (e) => {
    e.preventDefault();
    const { error } = await supabase.auth.api.updateUser(token, { password: newPassword });
    setMessage(error ? `Error: ${error.message}` : 'Password reset successful!');
  };

  return (
    <form onSubmit={handleReset}>
      <label>Reset Token:</label>
      <input value={token} onChange={(e) => setToken(e.target.value)} required />
      <label>New Password:</label>
      <input type="password" value={newPassword} onChange={(e) => setNewPassword(e.target.value)} required />
      <button type="submit">Reset Password</button>
      {message && <p>{message}</p>}
    </form>
  );
};

export default ResetPasswordForm;

Note: I used supabase.auth.api.updateUser. Check the latest Supabase docs as APIs can change.

A Little Extra: Skip the Hassle with DeployJet

Now, if you’re planning to build a mobile app and want to skip the hassle of adding analytics, auth, notifications etc from scratch, check out DeployJet.

DeployJet - A faster way to build and launch mobile apps

Accelerate your mobile app development with DeployJet’s Expo template and starter kit. Build feature-rich apps fast with our optimized React Native solutions.

deployjet.dev

It’s a game changer for developers who want to focus on building great apps without getting bogged down in setup.

Thanks for reading!

Wrapping Up

By customizing the email template and setting up a straightforward UI, I managed to enhance my app’s security and user experience. If you’re looking to do the same, give these steps a try and tweak them to fit your project.

Happy coding, and feel free to share your experiences or questions in the comments!