How to handle redirect...

[ChrisB007]

Hello guys,
I was hoping someone would show me how to handle redirect (to dashboard page) in supabase. Here below is a sample of my code (The issue is that it doesn't redirect to any page)

import useSWR from "swr";
import { Auth, Card, Typography, Space } from "@supabase/ui";
import { supabase } from "../utils/supabaseClient";
import { useEffect, useState } from "react";
import Dashboard from "./dashboard/index";
import { useRouter } from "next/router";

const fetcher = (url, token) =>
  fetch(url, {
    method: "GET",
    headers: new Headers({ "Content-Type": "application/json", token }),
    credentials: "same-origin",
  }).then((res) => res.json());

const Index = () => {
  const { user, session } = Auth.useUser();
  const { data, error } = useSWR(
    session ? ["/api/getUser", session.access_token] : null,
    fetcher
  );
  const [authView, setAuthView] = useState("sign_in");

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        if (event === "PASSWORD_RECOVERY") setAuthView("forgotten_password");
        if (event === "USER_UPDATED")
          setTimeout(() => setAuthView("sign_in"), 1000);
        // Send session to /api/auth route to set the auth cookie.
        // NOTE: this is only needed if you're doing SSR (getServerSideProps)!
        fetch("/api/auth", {
          method: "POST",
          headers: new Headers({ "Content-Type": "application/json" }),
          credentials: "same-origin",
          body: JSON.stringify({ event, session }),
        }).then((res) => res.json());
      }
    );

    return () => {
      authListener.unsubscribe();
    };
  }, []);

  const View = () => {
    if (!user)
      return (
        <Space direction="vertical" size={8}>
          <div>
            <a href="/">
              <img className="signlogo" src="/images/logo.png" width="96" />
            </a>
            <Typography.Title level={3} className="text-center">
              Welcome to fluidFlats
            </Typography.Title>
          </div>
          <Auth
            supabaseClient={supabase}
            providers={["google"]}
            view={authView}
            socialLayout="horizontal"
            socialButtonSize="xlarge"
          />
        </Space>
      );

    return (
      <Space direction="vertical" size={6}>
        {authView === "forgotten_password" && (
          <Auth.UpdatePassword supabaseClient={supabase} />
        )}
        {user && (
          <>
            {async () =>
              await supabase.auth.signIn(
                { provider: "googole" },
                { redirectTo: "/dashboard" }
              )
            }
          </>
        )}
      </Space>
    );
  };

  return (
    <div style={{ maxWidth: "420px", margin: "96px auto" }}>
      <Card>
        <View />
      </Card>
    </div>
  );
};

export default Index;

[pmauchle]

Go to auth > settings and define your URLs, see Example below.

Now in your code you have to provide the full URL for the redirectTo, not just \dashboard.

If you wanna have a clean setup both on localhost and your live server you best store those redirect URLs in .env variables.

[ChrisB007]

Hello @pmauchle , thank you so much for your response. I did add a redirect URL in the supabase auth setting as you have advised but still doesn't behave the way I want it to behave on redirect ( I have prepared a screen share so you can better understand - please see it here ( https://streamable.com/44t8ea ). On login, it redirects to "mywebsite.com/#" which isn't an actual URL, and because there is no session in that route some of the contents are not showing. However, if you click on the logo - it redirects to the intended page "mywebsite.com/dashboard" - now the content shows cos now there is a session. The issue I am having is to redirect to '/dashboard' upon login. I figured if I set up redirect properly somewhere it'd go to the '/dashboard' page rather than "/#" Can you still help?

[pmauchle]

@ChrisB007 the way you use the auth you need to do the redirect yourself after the successful login. Looks like you used this example: https://github.com/supabase/supabase/blob/master/examples/nextjs-auth/pages/index.js

Like the description said: This example shows how to use Supabase auth both on the client and server in both API routes and when using server side rendering (SSR).

Try setting the redirectTo on the Auth Component

<Auth
      supabaseClient={supabase}
      providers={["google"]}
      view={authView}
      socialLayout="horizontal"
      socialButtonSize="xlarge"
     redirectTo="https://www.fluidflats.com/dashboard"
  />

[ChrisB007]

@pmauchle Thanks again for the prompt response. Here is my updated code - can you take a quick look and see if it was done right?
I am a supabase newbie.

import useSWR from "swr";
import { Auth, Card, Typography, Space, Button, Icon } from "@supabase/ui";
import { supabase } from "../utils/supabaseClient";
import { useEffect, useState } from "react";
import Dashboard from "./account";

const fetcher = (url, token) =>
  fetch(url, {
    method: "GET",
    headers: new Headers({ "Content-Type": "application/json", token }),
    credentials: "same-origin",
  }).then((res) => res.json());

const Index = () => {
  const { user, session } = Auth.useUser();
  const { data, error } = useSWR(
    session ? ["/api/getUser", session.access_token] : null,
    fetcher
  );
  const [authView, setAuthView] = useState("sign_in");

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      (event, session) => {
        if (event === "PASSWORD_RECOVERY") setAuthView("forgotten_password");
        if (event === "USER_UPDATED")
          setTimeout(() => setAuthView("sign_in"), 1000);
        // Send session to /api/auth route to set the auth cookie.
        // NOTE: this is only needed if you're doing SSR (getServerSideProps)!
        fetch("/api/auth", {
          method: "POST",
          headers: new Headers({ "Content-Type": "application/json" }),
          credentials: "same-origin",
          body: JSON.stringify({ event, session }),
        }).then((res) => res.json());
      }
    );

    return () => {
      authListener.unsubscribe();
    };
  }, []);

  const View = () => {
    if (!user)
      return (
        <Space direction="vertical" size={8}>
          <div>
            <a href="/">
              <img className="signlogo" src="/images/logo.png" width="96" />
            </a>
            <Typography.Title level={3} className="text-center">
              Welcome to fluidFlats
            </Typography.Title>
          </div>
          <Auth
            supabaseClient={supabase}
            providers={["google"]}
            view={authView}
            socialLayout="horizontal"
            socialButtonSize="xlarge"
            redirectTo="https://www.fluidflats.com/signIn"
          />
        </Space>
      );

    return (
      <>
        {user && (
          <Space direction="vertical" size={6}>
            {authView === "forgotten_password" && (
              <Auth.UpdatePassword supabaseClient={supabase} />
            )}
            <Auth
              supabaseClient={supabase}
              providers={["google"]}
              view={authView}
              socialLayout="horizontal"
              socialButtonSize="xlarge"
              redirectTo="https://www.fluidflats.com/dashboard"
            />
          </Space>
        )}
      </>
    );
  };

  return (
    <div style={{ maxWidth: "420px", margin: "96px auto" }}>
      <Card>
        <View />
      </Card>
    </div>
  );
};

export default Index;

[thorwebdev]

Do you see any error logs in the dev console? I do see a typo in your provider as well { provider: "googole" } instead of google.

[ChrisB007]

No, there is no error log - not even one.