Topics

Supabase•3y ago

How do i use OAuth Providers with Expo React Native (Supabase v2)

Hey guys, not sure how to use the OAuth providers in my expo react native app, I've seen some work arounds using expo-auth-session but this was for v1 supabase. could anyone provide some code snippets that work?

55 Replies

nelsonOP•3y ago

this is the snippet for supabase v1 but im on v2 and cant find a similar snippet

const redirectUri = AuthSession.makeRedirectUri({ useProxy: false });
const provider = 'google';

AuthSession.startAsync({
  authUrl: `https://MYSUPABASEAPP.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
  returnUrl: redirectUri,
}).then(async (response: any) => {
  if (!response) return;
  const { user, session, error } = await supabase.auth.signIn({
    refreshToken: response.params?.refresh_token,
  });
});

const redirectUri = AuthSession.makeRedirectUri({ useProxy: false });
const provider = 'google';

AuthSession.startAsync({
  authUrl: `https://MYSUPABASEAPP.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
  returnUrl: redirectUri,
}).then(async (response: any) => {
  if (!response) return;
  const { user, session, error } = await supabase.auth.signIn({
    refreshToken: response.params?.refresh_token,
  });
});

is my best bet just to use v1?

silentworks•3y ago

If you've asked a question here, there is no need to double post in #off-topic. Someone using Expo will come along and answer, if there is no answer then it's just that no one using Expo is online at the moment.

futurmaster•3y ago

@NVO After that you get the refresh token in the success response, then you can use it with setSession (https://supabase.com/docs/reference/javascript/auth-setsession) @silentworks I think community members would be more patient, satisfied when sometimes the Supabase team also trying to help more actively. In general, none of the staff try to help under this section so it's not so surprising that someone try to get help also somewhere else. 🙂

silentworks•3y ago

This is a community run platform. I am a Supabase team member who is here but I don't know all technologies so can't comment on them. Patience has nothing to do with team members being present as others have waited to be answered or tried to work out the issue they are having while waiting.

futurmaster•3y ago

@silentworks Oh okay I see. Then I misunderstand the use-case of this section. Let me ask one more question - I know it is not relevant to this expo topic but I think this is solved - so is there any section or platform where we (so the community) can get help from the team? There are some questions in what the community can't help but sometimes the answer would be important.

silentworks•3y ago

What kind of questions would this be? because It's more likely someone in the community has ran into this problem more than someone in the team. If its Supabase platform issue then you have the support menu in the dashboard or https://app.supabase.io/support/new

futurmaster•3y ago

In example scaling when self hosting but I think there are a lot more. I remember this because I’d help me also a lot but none of these type of questions got answered.

silentworks•3y ago

That's quite a broad topic and I'm not sure anyone in the team is self hosting something that needs scaling. This is what I mean by someone in the community is more likely to experience this than someone on the team.

futurmaster•3y ago

My point is that you are those who developing the system so you have all the knowledge how does it work and is there any way and if yeah to how to scale it.

silentworks•3y ago

Yet again scaling isn't a small topic and no one person can know what you are suggesting here. So the scenario would be more like multiple team members would have to leave their day to day to solve an issue that could potentially be 1 week to solve for 1 user. I don't think the example you gave is giving me a clear picture of where a team member's input would be more effective than a community member. We build the tools and use them but this doesn't mean we use them in the same capacity as the community, because everyone's use case is different. A good case of this is Realtime stuff, @garyaustin has answered more questions relating to this than anyone in the team, because he has seen different use cases than we have in the team. He has even found issues that members in the team have never come across, at this point is where we can step in and help.

futurmaster•3y ago

Hm I’ll check his answers then, thank you 🙂

nelsonOP•3y ago

sorry im not trying to spam you, but just trying to work through an issue, im sure you've been there yourself im getting

[AuthSessionMissingError: Auth session missing!]

[AuthSessionMissingError: Auth session missing!]

would someone be able to provide a working snippet?

nelsonOP•3y ago

@futurmaster this is what im doing

No description

nelsonOP•3y ago

this works on v1 ive set the auth/callback in my supabase dashboard and it works ok on v1 all ive changed here is setSession

futurmaster•3y ago

const redirectUri = AuthSession.makeRedirectUri({useProxy: false, path: '/'})
    const provider = 'facebook'
    const response = await AuthSession.startAsync({authUrl: `https://projectid.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`, returnUrl: redirectUri, projectNameForProxy: '@username/projectname'})
    if (_.get(response, 'type') == 'success') {
      supabase.auth.setSession(_.get(response, 'params.refresh_token')).then(({data, error}) => {})
    }

const redirectUri = AuthSession.makeRedirectUri({useProxy: false, path: '/'})
    const provider = 'facebook'
    const response = await AuthSession.startAsync({authUrl: `https://projectid.supabase.co/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`, returnUrl: redirectUri, projectNameForProxy: '@username/projectname'})
    if (_.get(response, 'type') == 'success') {
      supabase.auth.setSession(_.get(response, 'params.refresh_token')).then(({data, error}) => {})
    }

FYI I'm using lodash in my code

nelsonOP•3y ago

thanks so much man you are a legend @futurmaster what is the project name from proxy? like what should i set that to?

futurmaster•3y ago

That comes from the expo side, the same as you named your project in the expo system

nelsonOP•3y ago

ok will give it a go

nelsonOP•3y ago

@futurmaster this is what my code looks like now

No description

nelsonOP•3y ago

LOG  data?? {"session": null, "user": null}
LOG  error?? [AuthSessionMissingError: Auth session missing!]

LOG  data?? {"session": null, "user": null}
LOG  error?? [AuthSessionMissingError: Auth session missing!]

nelsonOP•3y ago

in my authentication tab in supabase

No description

nelsonOP•3y ago

@futurmaster what version are you using in you package json perhaps the api has changed slightly? is there something i need to do with my expo Linking config? how are you getting the redirect to work on /

futurmaster•3y ago

For which node module you mean?

nelsonOP•3y ago

supabase i literally have no idea what im doing wrong

futurmaster•3y ago

I’m not sure how you are using expo in your project. I’m using bare metal workflow so the configuration is a bit different than the normal expo managed workflow

nelsonOP•3y ago

okay

futurmaster•3y ago

I’m using the v2RC version

nelsonOP•3y ago

ive pretty much just got a bare expo template with a simple linking config for expo web although im not using expo wev web

futurmaster•3y ago

"@supabase/supabase-js": "^2.0.0-rc.8" - this is what I’m using

nelsonOP•3y ago

thanks i will give that a go if not i will probably just work on other things and then hopefully some docs on oauth for expo / react native are written because there is a quickstart guide for expo but its using the other sign in /sign up methods its a shame the docs lack in this area

futurmaster•3y ago

If you don’t get back any refresh token it means the AuthSession is misconfigured check that documentation

nelsonOP•3y ago

yeah i do get a refresh token that part is fine and im passing it to setSession but it then errors out saying auth session is missing i've logged it to console and i get a good response back from google oauth

futurmaster•3y ago

Hm it sounds strange Can you find the refresh token what you get in supabase? You can use the UI and there under the database choose auth schema

nelsonOP•3y ago

yeah let me have a look yeah its in the refresh_token table and the user_id for that token corresponds to the correct user in my oauth session and when i click the sign in with google btn it redirects okay and then a new user is saved in the authentication -> users table so the oauth part works okay i think... but the session is bugging out

nelsonOP•3y ago

No description

futurmaster•3y ago

Can you implement onAuthStateChange too and check this method with it? https://supabase.com/docs/reference/javascript/auth-onauthstatechange

onAuthStateChange() | Supabase

Receive a notification every time an auth event happens.

nelsonOP•3y ago

@futurmaster i have implemented it, it doesn’t not fire when logging in with oauth it does fire when i sign in using regular sign in with password method

futurmaster•3y ago

Ohkay got more stranger maybe that's the same problem why you get the error when trying to setup the refresh token. Which provider are you trying to use same as used by me?

nelsonOP•3y ago

i’m using google

nelsonOP•3y ago

@futurmaster your solution doesn't make sense according to typescript

nelsonOP•3y ago

its using a pick, which means it needs both of those fields in the object that is passed in as currentSession and if you cmd click/ go to definition into setSession method you will see it needs and uses both currentSession.access_token and currentSession.refresh_token

futurmaster•3y ago

Read the docs dude: https://supabase.com/docs/reference/javascript/auth-setsession

setSession() | Supabase

Sets the session data from the current session. If the current session is expired, setSession will take care of refreshing it to obtain a new session.

Olyno•3y ago

Hi :vmathi: I'm kinda confused about this discussion. Did you have a look in this guide? Could be a way to answer your question: https://supabase.com/docs/guides/with-expo

Quickstart: Expo | Supabase

Learn how to use Supabase in your React Native App.

futurmaster•3y ago

Hi @Olyno, unfortunately not because this topic is more related to social auth under expo

Olyno•3y ago

Isn't it what he was asking for?

futurmaster•3y ago

@Olyno he wants to know how to make Google OAuth working with supabase v2 js client in an expo project. The description what you linked are very detailed but unfortunately only the username/password auth type are used in it.

Olyno•3y ago

Well, the Supabase SDK is not exclusively limited to only username/password auth. You can use the signInWithOauth method instead of the username/password one The main issue i see here is how to setup Supabase with Expo, but this part is explained in the guide. When the question is more about how to use the sdk, there is already a lot of documentation about it :p

futurmaster•3y ago

Only for the v1 and not for v2 that’s the main problem 🙂 Right now I’m only using Facebook auth but will to implement Google too after that maybe could help more in this problem

Olyno•3y ago

I'm still confused by the problem here 😂

Olyno•3y ago

Is it what you're looking for? https://supabase.com/docs/reference/javascript/auth-signinwithoauth

signInWithOAuth() | Supabase

Log in an existing user via a third-party provider.

futurmaster•3y ago

Unfortunately this doesn't work in a react native application. In the v1 's doc you can find a working solution for oauth in a react native (expo) environment but there isn't any working example in the v2 version's doc. (Here is the old - v1 - approach: https://supabase.com/docs/reference/javascript/v1/auth-signin#sign-in-using-a-refresh-token-eg-in-react-native)

signIn() | Supabase

Log in an existing user, or login via a third-party provider.

silentworks•3y ago

You would just replace

const { user, session, error } = await supabase.auth.signIn({
  refreshToken: response.params?.refresh_token,
});

const { user, session, error } = await supabase.auth.signIn({
  refreshToken: response.params?.refresh_token,
});

with

const { user, session, error } = await supabase.auth.refreshSession({
  refresh_token: response.params?.refresh_token,
});

const { user, session, error } = await supabase.auth.refreshSession({
  refresh_token: response.params?.refresh_token,
});

for it to work with v2

silentworks•3y ago

This function is not in the documentation as yet but there is a PR to get it in soon https://github.com/supabase/supabase/pull/9839

GitHub

docs: add refreshSession() by j4w8n · Pull Request #9839 · supabase...

What kind of change does this PR introduce? Updates documentation for new refreshSession() method.

nelsonOP•3y ago

@silentworks thats a lot will give this a try ... when its released

export default function useOAuthLogin() {
  const signInOAuth = async (provider: OAuthProvider) => {
    const redirectUri = makeRedirectUri({
      path: "/auth/session", // This were missing if you use react-navigation linking
      useProxy: false,
    });
    console.log(redirectUri);
    console.log(`${supabaseUrl}/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`);

    const response = await startAsync({
      authUrl: `${supabaseUrl}/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
      returnUrl: redirectUri,
      projectNameForProxy: "@nrowley/mindstudy",
    });
    if (response.type == "success") {
      console.log("refresh token??", response.params?.refresh_token);

      let auth = {
        access_token: response.params!.access_token!,
        refresh_token: response.params!.refresh_token!,
      };

      supabase.auth.setSession(auth).then(({ data, error }) => {
        console.log("data??", data);
        console.log("error??", error);
      });
    }
  };

  return { signInOAuth };
}

export default function useOAuthLogin() {
  const signInOAuth = async (provider: OAuthProvider) => {
    const redirectUri = makeRedirectUri({
      path: "/auth/session", // This were missing if you use react-navigation linking
      useProxy: false,
    });
    console.log(redirectUri);
    console.log(`${supabaseUrl}/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`);

    const response = await startAsync({
      authUrl: `${supabaseUrl}/auth/v1/authorize?provider=${provider}&redirect_to=${redirectUri}`,
      returnUrl: redirectUri,
      projectNameForProxy: "@nrowley/mindstudy",
    });
    if (response.type == "success") {
      console.log("refresh token??", response.params?.refresh_token);

      let auth = {
        access_token: response.params!.access_token!,
        refresh_token: response.params!.refresh_token!,
      };

      supabase.auth.setSession(auth).then(({ data, error }) => {
        console.log("data??", data);
        console.log("error??", error);
      });
    }
  };

  return { signInOAuth };
}

scary thing is, i dont know why it works... i think its because i didnt have my linking configuration set up to handle the redirect uri

futurmaster•3y ago

Deep linking is something else and not the same as authsession do It means you can handle the same path in both cases the deep linking won’t matter here

Supabase gives you the tools, documentation, and community that makes managing databases, authentication, and backend infrastructure a lot less overwhelming.

40KMembers

View on Discord

Did you find this page helpful?