Topics

Supabase•3y ago

How to show auth screen after user signs up and clicks magic email link.

how can i "sign in" the user automatically after they click the email link, after i've called signUp()

40 Replies

nelsonOP•3y ago

when the user clicks the magic link after they are signed up, the onAuthStateChange subscription is not fired.

garyaustin•3y ago

It is really better handled in v2 code by using getSession. It will wait until the user is signed in to respond with session, or respond immediately if already in localstorage and valid. If the user is not going to be signed in it will return null.

nelsonOP•3y ago

@garyaustin okay ive got something like this

No description

nelsonOP•3y ago

No description

nelsonOP•3y ago

^ where the sign up is called i want it to show the RootNavigator (authenticated routes) after they click the email link. whats the best way to handle this ?

DevDave•3y ago

You probably want to configure the emailRedirectTo option when signing up.

const {
  data: { user: signUpUser, session: signUpSession },
  error: signUpError
} = await supabaseClient.auth.signUp({
  email,
  password,
  options: {
    emailRedirectTo: `${location.origin}/signin`
  }        
});

const {
  data: { user: signUpUser, session: signUpSession },
  error: signUpError
} = await supabaseClient.auth.signUp({
  email,
  password,
  options: {
    emailRedirectTo: `${location.origin}/signin`
  }        
});

Ahh nevermind, you want to instantly log the user in... I don´t think thats possible without polling the auth server for the verification status

nelsonOP•3y ago

@DevDave cheers mate, if i have to poll then, i will probably just redirect to the login screen instead. would be nice if the onAuthStateChange subscriber picked up these changes... im going to try this

supabase
  .channel('auth:users')
  .on('postgres_changes', { event: '*', schema: '*' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

supabase
  .channel('auth:users')
  .on('postgres_changes', { event: '*', schema: '*' }, payload => {
    console.log('Change received!', payload)
  })
  .subscribe()

and see if i can find the event then i can manually log in the user, as i have the details in this context

garyaustin•3y ago

Realtime is not going to work as you can't enable realtime on auth schema tables.

nelsonOP•3y ago

ahhh

garyaustin•3y ago

you could trigger a profile table or something along those lines, but seemingly getting complicated.

nelsonOP•3y ago

yeah im not that bothered. would be nice though... @garyaustin so then, is there something you can tap into to know when a user has clicked that link in the email after sign up? i dont see how the flow makes sense if we dont know whether they have confirmed their account... unless we check when they try and login?

garyaustin•3y ago

Normally after you click that link it comes back to the app and signs in. You can use redirectTo to control the url it comes back to, otherwise it returns to root.

nelsonOP•3y ago

when you say signs in, you mean the user would just enter details?

garyaustin•3y ago

No, the supabase-js/gotrue-js code handles signing in the user and setting the session.

nelsonOP•3y ago

okay cool, do you have any idea how i would be able to get this going in my expo project? any resources on that? because im not sure about "where" exactly to redirect to

garyaustin•3y ago

https://supabase.com/docs/guides/with-expo

Quickstart: Expo | Supabase

Learn how to use Supabase in your React Native App.

garyaustin•3y ago

That one does not use redirectTo, just returns to the root page.

garyaustin•3y ago

https://supabase.com/docs/reference/javascript/auth-signup

When the user confirms their email address, they are redirected to the SITE_URL by default. You can modify your SITE_URL or add additional redirect URLs in your project.

And

emailRedirectTo   optional   string
The redirect url embedded in the email link

signUp() | Supabase

Creates a new user.

nelsonOP•3y ago

can the redirect url be my supabase project url maybe project url /auth/callback will that work? or does it need to point back to my expo app?

garyaustin•3y ago

Supabase will always redirect back to your app on signUp with email confirm and signIn (except email/password). redirectTo just allows you to pick a path versus root. I use signUp with a token to avoid the redirect in my PWA app, Then I just sit in a screen waiting for the code after SignUp.

nelsonOP•3y ago

okay... i guess what im trying to get at is, where would i set my redirectTo? just a path in my expo app? sorry for all the questions but i kind of dont get the redirect part...

garyaustin•3y ago

Yes, unless you want it just to redirect to root.

nelsonOP•3y ago

i see that the email link has access tokens and refresh tokens, do i need to manually do anything with those? or should that just "magically" work after i redirect to root of my app?

garyaustin•3y ago

It will. You can await getSession. if getSession returns null, that means there is no signUp process going on, and you don't have a signed in user already, so you go to your signUp screen.

nelsonOP•3y ago

i see... so i would await getSession on a landing page

garyaustin•3y ago

Otherwise getSession will either immediately or eventually return a session (or error).

nelsonOP•3y ago

okay, so what i need to figure out is expo linking

garyaustin•3y ago

I can't help with that, I use SvelteKit and only used react for a short time.

nelsonOP•3y ago

yeah no worries, thanks a lot would i need to set this url in my auth settings for supabase?

nelsonOP•3y ago

here ^

No description

nelsonOP•3y ago

i assume so?

garyaustin•3y ago

only if you don't want it to go to root (the site URL)

nelsonOP•3y ago

@garyaustin does this link look okay ish to you?

https://obfuscated.supabase.co/auth/v1/verify?token=xxxxxx455bdbb4314ac8f2b1b258cad7a57a5ec8379cf46c166696a96&type=signup&redirect_to=exp://192.168.1.118:19000/--/auth/callback

https://obfuscated.supabase.co/auth/v1/verify?token=xxxxxx455bdbb4314ac8f2b1b258cad7a57a5ec8379cf46c166696a96&type=signup&redirect_to=exp://192.168.1.118:19000/--/auth/callback

so this is the link i get in my emails now the exp:// is the expo project link

nelsonOP•3y ago

also do i need to have anything setup here for the "user sessions" ?

No description

garyaustin•3y ago

Yes the site URL has to be set to your root. I'm really not sure on expo links.... This was one quick hit, https://github.com/supabase/supabase/discussions/2489 There may, probably are better ones.

GitHub

Expo react-native and fb/google auth redirect · Discussion #2489 · ...

Hello ! I have been trying to get the authentication to work with Facebook and Google for several days (work perfectly in dev / published with expo), but I have a problem with the redirect with sta...

nelsonOP•3y ago

my root expo url?

garyaustin•3y ago

Sorry, I'm not much help on expo. You might want to ask just the question on how to redirect with expo with a new post.

nelsonOP•3y ago

@garyaustin thanks that link above just solved my oauth problem lol google oauth now works! and yeah i created a new post for the email magic link so @garyaustin you have a landing page that calls getSession on render, so when a user clicks through the email link it should find a session? Would you be able provide what this looks like in sveltekit and i can translate this to react land? im doing something like this currently

  useEffect(() => {
    console.log("remounted");
    async function checkSession() {
      const { data, error } = await supabase.auth.getSession();
      console.log(data);
    }
    checkSession().catch((error) => console.log(error));
  });

  useEffect(() => {
    console.log("remounted");
    async function checkSession() {
      const { data, error } = await supabase.auth.getSession();
      console.log(data);
    }
    checkSession().catch((error) => console.log(error));
  });

so on mount / render im trying to check for a session... is that enough or do i need to set the session after getting it?

garyaustin•3y ago

I don't use redirects at all, so my code would not be relevant. I check for a user at startup. If there is no session info then I sit in a signIn(email/password) /SignUp screen. If there is a user then I start doing stuff. If the user signsUp I sit in a screen waiting for them to copy the 6 digit code in the email and then verifyOTP.

export async function setupUser() {
    let {data:{session}} = await supabase.auth.getSession()
    console.log('session ',session)

    if(!session || !session.user) {
        console.log('not logged in',session)
        const offlineUserInfo = await generalCache.getItem('offlineUserInfo')
        if (offlineUserInfo) {
            console.log('offline userInfo',offlineUserInfo)
            userInfo.set(offlineUserInfo)
            userId.set(offlineUserInfo.uid)
            return true
        }
    } else {
        console.log ('have session',session, session.user)
        userId.set(session.user.id)
        let error = await loadUserInfo(session.user)
......

export async function setupUser() {
    let {data:{session}} = await supabase.auth.getSession()
    console.log('session ',session)

    if(!session || !session.user) {
        console.log('not logged in',session)
        const offlineUserInfo = await generalCache.getItem('offlineUserInfo')
        if (offlineUserInfo) {
            console.log('offline userInfo',offlineUserInfo)
            userInfo.set(offlineUserInfo)
            userId.set(offlineUserInfo.uid)
            return true
        }
    } else {
        console.log ('have session',session, session.user)
        userId.set(session.user.id)
        let error = await loadUserInfo(session.user)
......

nelsonOP•3y ago

okay cool thanks for being patient with me i found a solution to this too: you want in your landing page a useEffect like this

export function WelcomeScreen({ navigation, route }: Props) {
  const { user, setUser } = useAuthStore();
  const { signInOAuth } = useOAuthLogin();

  const { colorScheme } = useColorScheme();

  console.log("color??", colorScheme);

  useEffect(() => {
    console.log("navigated toooo");
    if (route.params?.status) {
      console.log("status!!!!!", route.params.status);
      let authResponse = route.params.status;
      authResponse = authResponse.replace("#", "?");
      console.log(authResponse);

      let params = new URLSearchParams(authResponse);
      console.log(params.getAll("access_token"));

      let auth = {
        access_token: params.getAll("access_token")[0],
        refresh_token: params.getAll("refresh_token")[0],
      };

      supabase.auth.setSession(auth).then(({ data, error }) => {
        console.log("data??", data);
        console.log("error??", error);
      });
    }
  }, [route.params?.status]);

export function WelcomeScreen({ navigation, route }: Props) {
  const { user, setUser } = useAuthStore();
  const { signInOAuth } = useOAuthLogin();

  const { colorScheme } = useColorScheme();

  console.log("color??", colorScheme);

  useEffect(() => {
    console.log("navigated toooo");
    if (route.params?.status) {
      console.log("status!!!!!", route.params.status);
      let authResponse = route.params.status;
      authResponse = authResponse.replace("#", "?");
      console.log(authResponse);

      let params = new URLSearchParams(authResponse);
      console.log(params.getAll("access_token"));

      let auth = {
        access_token: params.getAll("access_token")[0],
        refresh_token: params.getAll("refresh_token")[0],
      };

      supabase.auth.setSession(auth).then(({ data, error }) => {
        console.log("data??", data);
        console.log("error??", error);
      });
    }
  }, [route.params?.status]);

linking config for expo to the landing page

const linking: LinkingOptions<RootStackParamList & AuthStackParams> = {
  prefixes: [Linking.createURL("/")],
  config: {
    screens: {
      Root: {
        screens: {
          HomeTab: {
            screens: {
              HomeScreen: "one",
            },
          },
          StatsTab: {
            screens: {
              StatsScreen: "two",
            },
          },
        },
      },
      Welcome: "auth/callback/:status",
    },
  },
};

const linking: LinkingOptions<RootStackParamList & AuthStackParams> = {
  prefixes: [Linking.createURL("/")],
  config: {
    screens: {
      Root: {
        screens: {
          HomeTab: {
            screens: {
              HomeScreen: "one",
            },
          },
          StatsTab: {
            screens: {
              StatsScreen: "two",
            },
          },
        },
      },
      Welcome: "auth/callback/:status",
    },
  },
};

email redirect to link

  const { data, error } = await supabase.auth.signUp({
        email: formValues.email,
        password: formValues.password,
        options: {
          emailRedirectTo: Linking.createURL("/auth/callback/"),
        },
      });

  const { data, error } = await supabase.auth.signUp({
        email: formValues.email,
        password: formValues.password,
        options: {
          emailRedirectTo: Linking.createURL("/auth/callback/"),
        },
      });

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?