Skip to main content

Source: ocean/docs/SETUP_OTP.md | ✏️ Edit on GitHub

Setting Up OTP-Only Authentication in Supabase

Since Supabase sends magic links by default, you need to manually configure the email templates to send OTP codes instead.

Steps to Configure OTP​

1. Go to Your Supabase Dashboard​

Visit: https://supabase.com/dashboard/project/fldiayolmgphysdwgsuk/auth/email-templates

2. Update the "Confirm signup" Template​

Subject:

Verify your Ocean account

Message:

<h2>Welcome to Ocean!</h2>

<p>Please verify your email address by entering this code:</p>

<div
  style="background-color: #f4f4f5; border-radius: 6px; padding: 24px; margin: 20px 0; text-align: center;"
>
  <p style="margin: 0; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #18181b;">
    {{ .Token }}
  </p>
</div>

<p style="color: #71717a; font-size: 14px;">This code will expire in 5 minutes.</p>

<p style="color: #71717a; font-size: 14px;">
  If you didn't create an account, you can safely ignore this email.
</p>

Subject:

Your Ocean verification code

Message:

<h2>Sign in to Ocean</h2>

<p>Enter this code to sign in to your account:</p>

<div
  style="background-color: #f4f4f5; border-radius: 6px; padding: 24px; margin: 20px 0; text-align: center;"
>
  <p style="margin: 0; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #18181b;">
    {{ .Token }}
  </p>
</div>

<p style="color: #71717a; font-size: 14px;">This code will expire in 5 minutes.</p>

<p style="color: #71717a; font-size: 14px;">
  If you didn't request this code, you can safely ignore this email.
</p>

4. Update the "Change Email Address" Template​

Subject:

Confirm your new email address

Message:

<h2>Confirm your email change</h2>

<p>Enter this code to confirm your new email address:</p>

<div
  style="background-color: #f4f4f5; border-radius: 6px; padding: 24px; margin: 20px 0; text-align: center;"
>
  <p style="margin: 0; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #18181b;">
    {{ .Token }}
  </p>
</div>

<p style="color: #71717a; font-size: 14px;">This code will expire in 5 minutes.</p>

5. Update the "Reset Password" Template​

Subject:

Reset your Ocean password

Message:

<h2>Reset your password</h2>

<p>Enter this code to reset your password:</p>

<div
  style="background-color: #f4f4f5; border-radius: 6px; padding: 24px; margin: 20px 0; text-align: center;"
>
  <p style="margin: 0; font-size: 32px; font-weight: bold; letter-spacing: 8px; color: #18181b;">
    {{ .Token }}
  </p>
</div>

<p style="color: #71717a; font-size: 14px;">This code will expire in 5 minutes.</p>

<p style="color: #71717a; font-size: 14px;">
  If you didn't request a password reset, you can safely ignore this email.
</p>

Important Notes​

  1. {{ .Token }} - This variable contains the 6-digit OTP code
  2. {{ .ConfirmationURL }} - This contains the magic link URL (we're NOT using this)
  3. The code expires in 5 minutes by default
  4. Users will receive a 6-digit code instead of a clickable link

Testing​

  1. Sign up with a new email
  2. Check your email for the OTP code (not a link)
  3. Enter the code on the verification page
  4. You should be logged in after successful verification

Troubleshooting​

  • If you still receive links, make sure you saved the email templates
  • Check that you're using {{ .Token }} not {{ .ConfirmationURL }}
  • The email might go to spam, check your spam folder
  • Use the Inbucket email testing at http://localhost:54324 for local testing