Next.js 12 + Supabase project error "No storage option exists to persist the session"

W

4

5

I am working on a project using Supabase and Next.js 12.3.4, and I have set up Google sign in using this tutorial: Supabase Login with Google. When I run the project, Terminal repeatedly warns

No storage option exists to persist the session, which may result in unexpected behavior when using auth.
        If you want to set persistSession to true, please provide a storage option or you may set persistSession to false to disable this warning.

This is the code to sign in:

import supabaseClient from "./supabaseClient";

export default async function signInWithGoogle() {
    const { data, error } = await supabaseClient.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: 'http://localhost:3000/account'
        }
    })
}

One response to someone else's post about this suggested following this tutorial, which I tried as my project also has a pages directory. However, the tutorial refers to a src/App.jsx file with an App function, whereas I have a pages/_app.js file with "export default class MyApp extends App", for which the tutorial doesn't work--Attempting to use the recommended code in _app.js resulted in Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

This is my _app.js file:

import App from 'next/app'
import Head from 'next/head'
import React from 'react'
import { Analytics } from '@vercel/analytics/react';
import font from "/components/styles.css";


export default class MyApp extends App {
    static async getInitialProps({ Component, ctx }) {
        let pageProps = {}

        if (Component.getInitialProps) {
            pageProps = await Component.getInitialProps(ctx)
        }

        return { pageProps }
    }

    render() {
        const { Component, pageProps } = this.props

        return (
            <>
                <Head>
                    <title>words</title>
                   
                </Head>
                <Component {...pageProps} />
                <Analytics />
            </>
        )
    }
}

How can I resolve the storage error? (I am new to all of these technologies, so this may have an obvious solution.) Thanks!

Waisted answered 23/6, 2023 at 20:37 Comment(0)

W

0

Thank you both for your responses. What I ended up doing (which unfortunately doesn't answer this question with the parameters I originally stated) was upgrading the project to Nextjs 13 (as this made another aspect of the project much easier to carry out). After upgrading, I set up Supabase according to this tutorial: https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs and altered the signInWithGoogle function:

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"

export default async function signInWithGoogle() {
    const supabase = createClientComponentClient()
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: 'http://localhost:3000/auth/callback'
        }
    })
}

The error stopped after the project was upgraded.

Waisted answered 13/7, 2023 at 18:37 Comment(0)

T

6

I was also facing this issue when i used supabase in node ,Hope it might fix your issue

const supabase = createClient(supabaseUrl, supabaseKey, {
  auth: { persistSession: false },
});

Thamos answered 27/6, 2023 at 11:8 Comment(1)

I am using Supabase in a backend service (with service key) without user auth, this is the best option for me – Physiological 7/9, 2023 at 19:2

D

4

If you use Redux for state management and want to integrate it with Supabase, you can use redux-persist with redux-persist/lib/storage as the storage mechanism. The warning should go away.

import storage from 'redux-persist/lib/storage';
const supabase = createClient( supabaseUrl, supabaseKey, {auth: {storage: storage}});

Divisive answered 7/7, 2023 at 16:18 Comment(0)

H

2

In my case, I had my superbase createClient in a different file and I was importing that on the client. Turns out that makes the code run on the server as well during SSR.

To fix it, all I did was remove that extra file and put the createClient call inside an empty useEffect. This fixed it.

Ex:

const [supabase, setSupabase] = useState(null)

  useEffect(() => {
    setSupabase(createClient(config.SUPABASE_URL, config.SUPABASE_KEY));
  }, []);

Hope this helps!

Hilliary answered 11/8, 2023 at 14:38 Comment(0)

W

0

Thank you both for your responses. What I ended up doing (which unfortunately doesn't answer this question with the parameters I originally stated) was upgrading the project to Nextjs 13 (as this made another aspect of the project much easier to carry out). After upgrading, I set up Supabase according to this tutorial: https://supabase.com/docs/guides/getting-started/tutorials/with-nextjs and altered the signInWithGoogle function:

import { createClientComponentClient } from "@supabase/auth-helpers-nextjs"

export default async function signInWithGoogle() {
    const supabase = createClientComponentClient()
    const { data, error } = await supabase.auth.signInWithOAuth({
        provider: 'google',
        options: {
            redirectTo: 'http://localhost:3000/auth/callback'
        }
    })
}

The error stopped after the project was upgraded.

Waisted answered 13/7, 2023 at 18:37 Comment(0)

Recommended topics

Hot tags