search

timtbdev / Next.js-Blog-App

✨ Multi-User, Full-stack blogging application built with Next.js and Supabase.
https://ink.mn
322 stars 55 forks source link

Error while uploading file to superbase storage #2

Closed riush03 closed 1 year ago

riush03 commented 1 year ago

I have cloned this repo, when I try to upload image am getting this error. Any idea how to solve, am using firebase free account. Error: Invariant: cookies() expects to have requestAsyncStorage, none available. at Object.cookies (webpack-internal:///(rsc)/./node_modules/next/dist/client/components/headers.js:50:15) at NextServerComponentAuthStorageAdapter.getCookie (webpack-internal:///(rsc)/./node_modules/@supabase/auth-helpers-nextjs/dist/index.js:196:42) at NextServerComponentAuthStorageAdapter.getItem (webpack-internal:///(rsc)/./node_modules/@supabase/auth-helpers-shared/dist/index.js:266:28) at getItemAsync (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/lib/helpers.js:133:33) at SupabaseAuthClient.__loadSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:867:67) at SupabaseAuthClient._useSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:850:39) at SupabaseAuthClient._emitInitialSession (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:1348:27) at eval (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:1338:22) at eval (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:814:36) at SupabaseAuthClient.lockNoOp [as lock] (webpack-internal:///(rsc)/./node_modules/@supabase/gotrue-js/dist/main/GoTrueClient.js:34:18)

Node.js v18.17.1

timtbdev commented 1 year ago

Hi Riush,

  1. You need to create a Supabase Storage Public Bucket. Please name it "posts", and make it public storage. Even though your bucket is public, you need to provde a Row Level Security for SELECT, INSERT, UPDATE, DELETE to able to make CRUD oeprations. You can watch this tutorial: https://www.youtube.com/watch?v=HvOvdD2nX1k&t=271s how to create a public bucket with Row Level Security.

  2. Please replace /components/protected/editor/post-editor.tsx with following code.

https://github.com/timtbdev/Next.js-Blog-App/blob/7bdbdcd3973f3434a68a473e236e2087418a0e0e/components/protected/editor/post-editor.tsx

  1. I've been working to replace current Supabase standard upload with resumable Upload wit Uppy vis TUS protocol. That's why you're getting error message. Once I finish with it, I'll let you know. You can read more about this here: https://supabase.com/blog/storage-v3-resumable-uploads
riush03 commented 1 year ago

Thanks it worked. I also tried adding this sql code to the query and it also worked perfectly. I got it from this tutorial Build a User Management App with NextJS

`-- Create a table for public profiles create table profiles ( id uuid references auth.users not null primary key, updated_at timestamp with time zone, username text unique, full_name text, avatar_url text, website text,

constraint username_length check (char_length(username) >= 3) ); -- Set up Row Level Security (RLS) -- See https://supabase.com/docs/guides/auth/row-level-security for more details. alter table profiles enable row level security;

create policy "Public profiles are viewable by everyone." on profiles for select using (true);

create policy "Users can insert their own profile." on profiles for insert with check (auth.uid() = id);

create policy "Users can update own profile." on profiles for update using (auth.uid() = id); `