DEV Community: Tanmay Kaushik

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

Tanmay Kaushik — Wed, 19 Feb 2025 16:54:18 +0000

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!

Integrating Analytics in Your Mobile App with Vexo

Tanmay Kaushik — Tue, 18 Feb 2025 19:22:35 +0000

Hey everyone, I recently started using Vexo for analytics in my mobile app, and I wanted to share my experience on how I set it up.

Why I Chose Vexo

I was looking for a mobile analytics tool that was easy to integrate and provided real-time data without a ton of hassle. The platform’s clean dashboard and straightforward SDK really is amazing.

Getting Started

First off, I went to the Vexo homepage and signed up for an account. Once I was in, I grabbed my API key from the dashboard. This key is what connects your app to Vexo, so keep it handy!

For my React Native app, I installed the Vexo SDK using npm. Here’s the command I ran in my terminal:

npm install vexo-analytics --save

Initializing Vexo in My App

Next, I updated my App.js to initialize Vexo with my API key. It was super straightforward:

import React from 'react';
import { View, Text } from 'react-native';
import vexo from 'vexo-analytics'; 

vexo.init({
  apiKey: 'YOUR_VEXO_API_KEY',
});

export default function App() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Hey, welcome to my app with Vexo Analytics!</Text>
    </View>
  );
}

Tracking Events

One of the coolest parts is tracking user interactions. Let’s say I want to log when someone presses a button. I just add a function like this:

const handleButtonPress = () => {
  Vexo.trackEvent('ButtonPressed', {
    buttonName: 'SignUp',
    timestamp: new Date().toISOString(),
  });
};

I hook this function up to a button’s onPress event, and bam—every time someone taps, Vexo logs the event. I love how easy it is to customize the event data too.

Checking Out the Dashboard

After I integrated everything, I started checking my Vexo dashboard. It’s awesome to see real-time events, understand how users interact with the app, and spot trends that can help me tweak the UX. It feels like having a pulse on what’s happening in my app 24/7.

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.

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

Thanks for reading!

Building Mobile Apps made simple

Tanmay Kaushik — Mon, 17 Feb 2025 17:04:05 +0000

I Loved Building Mobile Apps, But...

Every project was reinventing the wheel—hundreds of lines of boilerplate, tons of integrations, and endless context switching of authentication, payments, notifications, and analytics. Every new project was the same fight, and I couldn't help but wonder: Is there a better way?

The Struggle

I spent hours and hours messing around with configurations, installing third-party services, and trying to kludge together a sensible development workflow. Even when I did manage to get something working, it was ugly and hard to support. I realized that I was spending more time setting up the infrastructure than building the features I was interested in.

My "Aha!" Moment

It had finally become too much after a very long debugging and frustration-filled night. I was fed up. I set my mind on doing something about it.

I started constructing a tool that would capture the most vital aspects of mobile app development and unite them into one process. The concept was simple:

Eliminate the mundane setup procedures so that I—and everybody else—could devote more time to what matters most: building awesomeness.

The Journey

I started by assembling the most frequent pain points:

Auth: Social sign-ins, email/password setups, and password reset were always such a hassle.
Payments: Apple Pay and Google Pay integration required a lot of boilerplate.
Notifications & Analytics: These services were spread all over various platforms, each with its own learning curve.

Slowly, I began developing a solution that addressed each of these issues. I iterated on a rapid cycle, testing out ideas and refining the tool until it became a seamless part of my development process.

The Outcome

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

Today, I have a solution that bundles all these integrations into one unified process. It's not a silver bullet, but it has significantly reduced setup time and complexity for my projects.

More importantly, it has allowed me to get back to what I love—coding and creating apps that make a difference.

Final Thoughts

This journey wasn’t just about saving time; it was about reclaiming the joy of development.

If you’ve ever felt bogged down by repetitive setup tasks, know that you’re not alone. Sometimes, the best way to solve a problem is to build something yourself.

Thanks for reading, and happy coding! 🚀