S
Supabase•3y ago
futurmaster

React native password reset

I’m curious how can I implement the whole password reset procedure inside a react native (expo) app. I found the necessary client function to send a reset email with a link but that’s all I know. I’m not sure about the following steps.
7 Replies
mamulini
mamulini•3y ago
hey, after clicking the reset link it should redirect you to the expo project. If you want to redirect to specific screen, you need to setup deep linking https://reactnavigation.org/docs/deep-linking I'm doing it write now and stuck on redirect link from Supabase, when i change link like https://***supabase.co/auth/v1/verify?token=***&type=recovery&redirect_to=exp://192.168.0.104:19000/--/forgotpassword it doesn't go to that screen
futurmaster
futurmasterOP•3y ago
The reason is because supabase redirect link doesnt contains a real query params you get the refresh token with a # prefix I solved this type of problem with a custom handler where I changing the # prefix to ? so exactly create a real query what deep linking can handle properly. I’m using both of getInitialURL (https://reactnavigation.org/docs/navigation-container/#linkinggetinitialurl) and subscribe (https://reactnavigation.org/docs/navigation-container/#linkingsubscribe) methods.
mamulini
mamulini•3y ago
Thank mate, I will take a look could you please provide an example please?
futurmaster
futurmasterOP•3y ago
Example for what?
mamulini
mamulini•3y ago
Example of React Navigation Linking config for Supabase a custom handler
futurmaster
futurmasterOP•3y ago
import _ from 'lodash'
import * as Linking from 'expo-linking'

async getInitialURL() {
  let url = await Linking.getInitialURL()
  if (url && _.includes(url, 'type=recovery')) url = _.replace(url, 'login#', 'resetpassword?')
  if (url && _.includes(url, Linking.createURL('login#'))) url = _.replace(url, 'login#', 'login?')

  return url
},
subscribe(listener) {
  const deeplinkSubscription = Linking.addEventListener('url', ({url}: {url: any}) => {
  if (url && _.includes(url, 'type=recovery')) url = _.replace(url, 'login#', 'resetpassword?')
  if (url && _.includes(url, Linking.createURL('login#'))) url = _.replace(url, 'login#', 'login?')
          listener(url)
  })

  return () => deeplinkSubscription.remove()
}
import _ from 'lodash'
import * as Linking from 'expo-linking'

async getInitialURL() {
  let url = await Linking.getInitialURL()
  if (url && _.includes(url, 'type=recovery')) url = _.replace(url, 'login#', 'resetpassword?')
  if (url && _.includes(url, Linking.createURL('login#'))) url = _.replace(url, 'login#', 'login?')

  return url
},
subscribe(listener) {
  const deeplinkSubscription = Linking.addEventListener('url', ({url}: {url: any}) => {
  if (url && _.includes(url, 'type=recovery')) url = _.replace(url, 'login#', 'resetpassword?')
  if (url && _.includes(url, Linking.createURL('login#'))) url = _.replace(url, 'login#', 'login?')
          listener(url)
  })

  return () => deeplinkSubscription.remove()
}
mamulini
mamulini•3y ago
@futurmaster Thanks a lot, your example helped me

Did you find this page helpful?