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!

Improve this question

4 Answers 4

Reset to default
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 },
});
Improve this answer
1
  • I am using Supabase in a backend service (with service key) without user auth, this is the best option for me
    – Jesper van den Munckhof
    Sep 7, 2023 at 19:02
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}});
Improve this answer
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!

Improve this answer
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.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.