SSO auth not working

[Quicksand5660]

Describe the bug

I am currently working on implementing SSO authentication with Okta in my Next.js application, but I can't make it work.

The code I'm using:

const { data, error } = await supabase.auth.signInWithSSO({
    domain: "mydomain.com",
})

 if (data?.url) {
    window.location.href = response.url
}

This part of the code is functioning correctly. When I run it, I am redirected to Okta where I am able to successfully log in with my Okta account.

However, after being redirected back to my application: "http://localhost:3000/#access_token=CCCC&expires_at=1696000000&expires_in=604800&refresh_token=YYY,", the session (that I get from supabaseClient.auth.getSession() ) is not automatically set in my application and remains as null.

Additionally, I can confirm that the user has been created in my Authentication dashboard on Supabase (https://supabase.com/dashboard/project/XXX/auth/users ).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

Try implementing SSO with Okta (I haven't tried other providers) and notice the session remains null after being redirected to the application.

Expected behavior

The session should be automatically set in the application after redirecting from Okta.

Screenshots

System information

• OS: macOS
• Browser: chrome, safari
• Version of supabase-js: "next": "^13.4.1", "react": "^18.2.0", "@supabase/auth-helpers-nextjs": "0.8.1", "@supabase/auth-helpers-react": "0.4.2", "@supabase/supabase-js": "2.36.0",
• Version of Node.js: v18.14.0

Additional context

[testlablive]

I am facing the same issue with azure as saml provider

[vptill]

Having the same issue with the latest version, using inviteUserByEmail.

[k-daw]

Had the same issue for setting the session for user who is sent a password reset email for supabase dashboard, and not from my app itself (i.e not using the PKCE flow)

My dirty solution for that issue was to

1. parse the access token and refresh token from the anchor tag. (you must be in a client component to get access to window.location.hash)

2. use

   const { data, error } = await supabase.auth.setSession({
               access_token,
               refresh_token
           });

   to set the session.

3. session is set, i then update the user password with

const { data, error } = await supabase.auth.updateUser({ password })

------------------- more code here ------------------

type SessionParameters = {
    access_token?: string;
    refresh_token?: string;
}

function getSubstring(s: string, char1: string, char2: string): string {
    return s.slice(
        s.indexOf(char1) + 1,
        s.lastIndexOf(char2),
    );
}

function parseHashParameters(hash: string): SessionParameters {
    const parameters = hash.split('&');
    const parsedParamters: SessionParameters = {};
    parameters.map((parameter) => {
        const [key, value] = parameter.split('=');
        parsedParamters[key] = value;
        return 0;
    });

    return parsedParamters;
}

function ResetPasswordForm(): JSX.Element {
    const supabase = createClientComponentClient<Database>();
    const [hash, setHash] = useState('');
    const [parameters, setParameters] = useState({});

    useEffect(() => {
        const fetchSession = async () => {
            const { access_token, refresh_token } = parseHashParameters(hash.substring(1));
            const { data, error } = await supabase.auth.setSession({
                access_token,
                refresh_token
            });
        }
        if (hash) {
            fetchSession();
        }

    }, [hash]);

    useEffect(() => {
        setHash(window.location.hash);
    }, []);

[J0]

Hey team,

These sound like separate issues:

• If you're using SSO, we've recently merged in SSO (PKCE) do give that a spin and let us know
• For inviteUserByEmail we don't support this flow with PKCE so if you're using Auth Helpers you may need to parse the access token and set the session.

for user who is sent a password reset email for supabase dashboard

This looks like a slightly different flow. Do you mind sharing more details about the steps in the flow?

Thanks Joel

[k-daw]

@J0 can you ask supabase devs to add that to the documentation of inviteUserByEmail, cause it is not mentioned clearly anywhere

[J0]

@k-daw Gotcha. Opened a PR. Thanks for flagging this!

[kangmingtay]

Hi @Quicksand5660 and @testlablive, if you guys are still having issues with signInWithSSO, can you please reach out to us via our support form: https://supabase.com/dashboard/support/new?

This would make it easier for the team to investigate any issues with your projects.

[k-daw]

@kangmingtay i don't think there is a bug, rather the docs need to mention the token parsing issue from the anchor tag

cause the code provided in the docs supports PKCE check https://github.com/supabase/gotrue-js/issues/789#issuecomment-1774060703

[testlablive]

Hi @kangmingtay , thanks for the update, signInWithSSO and Azure as saml provider is working now.

[kangmingtay]

gonna close this issue since it doesn't seem like a bug?

@k-daw you shouldn't need to parse the anchor tag in the url on your own. The client library is supposed to handle this for you. If you are being redirected to your app with the #access_token=xxx&refresh_token=xxx still in the query fragments, you should check your browser network tab to see if the session is being stored in local storage correctly. If it's not, then we'll need to investigate why this is happening further.