Skip to content

Support Supabase phone and OTP authentication#3177

Merged
dthyresson merged 2 commits intoredwoodjs:mainfrom
dthyresson:dt-supabase-phone-otp
Aug 6, 2021
Merged

Support Supabase phone and OTP authentication#3177
dthyresson merged 2 commits intoredwoodjs:mainfrom
dthyresson:dt-supabase-phone-otp

Conversation

@dthyresson
Copy link
Copy Markdown
Contributor

@dthyresson dthyresson commented Aug 1, 2021

Fixes #3131
Fixes #3140

Supabase now supports SMS one-time-passwords with Twilio.

You can sign in and up with a phone number and optional password.

If using phone auth, you will need to verify the one-time-password (OTP) and therefore the verifyOTP function of the Supabase GoTrue client is now exposed.

See: https://supabase.io/docs/guides/auth/auth-twilio for more info

This PR and simplifies the logic in the signIn to just forward the request to the client and not replicate the logic for which params are needed.

Docs added: https://github.com/redwoodjs/redwoodjs.com/pull/762

signup(options: {
email: string
password: string
email?: string
Copy link
Copy Markdown
Contributor

@dac09 dac09 Aug 6, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we could change this to be like:

options: EmailAuth | SmsAuth | RefreshToken | OtherAuth

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Possibly, but I chose to match the Supabase GoTrue client:

https://github.com/supabase/gotrue-js/blob/797ea09b6188291861b5bed4a488cc74b6f95aaf/src/GoTrueClient.ts#L99

  async signUp(
    { email, password, phone }: UserCredentials,

The just have one type:

https://github.com/supabase/gotrue-js/blob/797ea09b6188291861b5bed4a488cc74b6f95aaf/src/lib/types.ts#L106

export interface UserCredentials {
  email?: string
  phone?: string
  password?: string
  refreshToken?: string
  // (Optional) The name of the provider.
  provider?: Provider
}

I see that it would make sense, but seems more practical to follow the Supabase client lead to keep in sync.

Maybe we should make that suggestion to them, actually.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure makes sense.

@dthyresson dthyresson merged commit 7e663d1 into redwoodjs:main Aug 6, 2021
dac09 added a commit to dac09/redwood that referenced this pull request Aug 9, 2021
* 'main' of github.com:redwoodjs/redwood:
  Improved useMatch to support search parameters (redwoodjs#2683)
  Supports SDL and Scaffold generation for Float scalar types (redwoodjs#3218)
  Allow custom functions to serve binary data (redwoodjs#3219)
  Support Supabase phone and OTP auth (redwoodjs#3177)
@domnantas
Copy link
Copy Markdown

Sorry for bumping an old thread, but how exactly is verifyOTP exposed? I'm unable to get it from const { verifyOTP } = useAuth() and there's no mention of it in docs

@dthyresson
Copy link
Copy Markdown
Contributor Author

dthyresson commented Oct 30, 2021

Sorry for bumping an old thread, but how exactly is verifyOTP exposed? I'm unable to get it from const { verifyOTP } = useAuth() and there's no mention of it in docs

Hi @domnantas you can get the “client” from useAuth. That will be the Supabase client and the instance of the auth client from that:

client.auth.verifyOTP

see: https://github.com/supabase/gotrue-js/blob/728df500e22c5c9702192c0bad4698cb43a93ef7/src/GoTrueClient.ts#L239

You can also do “client.auth” and access all the go-true client methods.

@domnantas
Copy link
Copy Markdown

Sweet, thanks! I can take care of updating the docs since I wasn't able to find any mention of that 😅

@domnantas
Copy link
Copy Markdown

domnantas commented Oct 30, 2021

I did this:

await client.auth.verifyOTP({ phone, token, redirectTo: routes.home() })

It did send a request to supabase and I got a response with access_token, token_type, expires_in and refresh_token 🎉 . However, redirect did not happen and isAuthenticated was still returning false. Do I need to plug the access_token somewhere?

EDIT:
I believe this is an issue with gotrue: supabase/auth-js#113 and supabase/auth#141

@dthyresson
Copy link
Copy Markdown
Contributor Author

EDIT: I believe this is an issue with gotrue: supabase/gotrue-js#113 and supabase/gotrue#141

Hi @domnantas I'm following this issue in the Supabase gotrue-js repo and since this issue here in RW is closed, perhaps we create a new issue for this and link the two issues you noted.

I does seem Supabase has an issue refreshing auth after the OTP is verified.

Would you mind creating a new issue and adding some example code how how you request and pass the OTP for verification?

That way we can create a small project -- or better yet add it to SMS auth to https://github.com/redwoodjs/playground-auth

@dthyresson
Copy link
Copy Markdown
Contributor Author

@domnantas I chatted with Supabase and let's open a Discussion here: https://github.com/supabase/supabase/discussions

That way I can respond and also get the Supabase support people to help.

@dthyresson dthyresson deleted the dt-supabase-phone-otp branch December 23, 2021 22:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Implement Supabase Auth SMS OTP with Twilio Support Supabase sign up + sign in with mobile/password and mobile OTP

3 participants