[Bug]: failed to fetch;failed to connect 54323,but 5050 report status ok

What happened?

A bug happened! http://localhost:3000/login,After I entered my account and password,web report "failed to fetch". And I checked the 5050, it said"{"status":"OK"}".but i failed to connect the http://localhost:54323/,it said "Unable to access this website. Localhost refused our connection request."

Relevant log output

worker        |   File "/usr/local/lib/python3.11/site-packages/httpx/_transports/default.py", line 86, in map_httpcore_exceptions
worker        |     raise mapped_exc(message) from exc
worker        | httpx.ConnectError: [Errno 111] Connection refused
backend-core  | INFO:     172.26.0.1:45280 - "GET /user HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45282 - "GET /user/identity HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45282 - "GET /user HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45280 - "GET /user/identity HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45280 - "GET /user HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45282 - "GET /user/identity HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45282 - "GET /user HTTP/1.1" 403 Forbidden
backend-core  | INFO:     172.26.0.1:45280 - "GET /user/identity HTTP/1.1" 403 Forbidden
backend-core  | INFO:     127.0.0.1:57488 - "GET /healthz HTTP/1.1" 200 OK
backend-core  | INFO:     127.0.0.1:41430 - "GET /healthz HTTP/1.1" 200 OK

Twitter / LinkedIn details

No response

Hello, @HarrietW221b! I'm here to help you with any bugs, questions, or contributions you have. Let's tackle this issue together!

To resolve the issue where logging in results in a "failed to fetch" error, with the backend reporting 403 Forbidden errors and connection refused on port 54323, you should check the following configurations in your config.toml file:

API Port Configuration: Ensure that the API port is correctly set and accessible. The current configuration shows:
```
[api]
port = 54321
```
Supabase Studio Port Configuration: Ensure that the Supabase Studio port is correctly set and accessible. The current configuration shows:
```
[studio]
port = 54323
```
API URL Configuration: Ensure that the api_url is correctly set to the URL that the frontend connects to. The current configuration shows:
```
api_url = "http://localhost"
```
Firewall and Network Settings: Ensure that the ports 54321 and 54323 are open and not blocked by any firewall or network settings.
Authorization and Authentication Settings: Ensure that the authentication settings are correctly configured to allow logins. The current configuration shows:
```
[auth]
site_url = "http://localhost:3000"
additional_redirect_urls = ["https://localhost:3000"]
enable_signup = true
```
Database Connection: Ensure that the database is running and accessible on the configured port. The current configuration shows:
```
[db]
port = 54322
```

Additionally, ensure that your frontend is correctly configured to use the backend URL and include the necessary authorization headers. Based on the provided useFetch hook, make sure that the NEXT_PUBLIC_BACKEND_URL environment variable is set correctly and that the authorization headers are being included in your fetch requests:

const baseURL = `${process.env.NEXT_PUBLIC_BACKEND_URL ?? ""}`;
const backendUrl = baseURL;

useEffect(() => {
  setInstance({
    ...fetchInstance,
    get: async (url, headers) =>
      fetchInstance.get(`${backendUrl}${url}`, {
        Authorization: `Bearer ${session?.access_token ?? ""}`,
        ...headers,
      }),
    post: async (url, body, headers) =>
      fetchInstance.post(`${backendUrl}${url}`, body, {
        Authorization: `Bearer ${session?.access_token ?? ""}`,
        ...headers,
      }),
    put: async (url, body, headers) =>
      fetchInstance.put(`${backendUrl}${url}`, body, {
        Authorization: `Bearer ${session?.access_token ?? ""}`,
        ...headers,
      }),
    delete: async (url, headers) =>
      fetchInstance.delete(`${backendUrl}${url}`, {
        Authorization: `Bearer ${session?.access_token ?? ""}`,
        ...headers,
      }),
  });
}, [session, backendUrl]);

If all configurations are correct and the issue persists, you may need to check the logs for more detailed error messages and ensure that all services are running as expected ^[1]^[2].

To continue talking to Dosu, mention @dosu.

@dosu How to make sure that my frontend is correctly configured to use the backend URL? and how to do this"Based on the provided useFetch hook, make sure that the NEXT_PUBLIC_BACKEND_URL environment variable is set correctly and that the authorization headers are being included in your fetch requests"?can you be more explicit and like step by step?

To ensure that your frontend is correctly configured to use the backend URL and include the necessary authorization headers in your fetch requests, follow these steps:

Set the NEXT_PUBLIC_BACKEND_URL Environment Variable:
- Create a .env file at the root of your project if it doesn't already exist.
- Add the following line to the .env file, replacing https://your-backend-url.com with your actual backend URL:
```
NEXT_PUBLIC_BACKEND_URL=https://your-backend-url.com
```

Configure the useFetch Hook:

Ensure you have the useFetch hook set up in your project. Here is the complete implementation of the useFetch hook:

import { useEffect, useState } from "react";
import { useSupabase } from "@/lib/context/SupabaseProvider";

interface FetchInstance {
get: (url: string, headers?: HeadersInit) => Promise<Response>;
post: (
 url: string,
 body: BodyInit | null | undefined,
 headers?: HeadersInit
) => Promise<Response>;
put: (
 url: string,
 body: BodyInit | null | undefined,
 headers?: HeadersInit
) => Promise<Response>;
delete: (url: string, headers?: HeadersInit) => Promise<Response>;
}

const fetchInstance: FetchInstance = {
get: async (url, headers) => fetch(url, { method: "GET", headers }),
post: async (url, body, headers) =>
 fetch(url, { method: "POST", body, headers }),
put: async (url, body, headers) =>
 fetch(url, { method: "PUT", body, headers }),
delete: async (url, headers) => fetch(url, { method: "DELETE", headers }),
};

export const useFetch = (): { fetchInstance: FetchInstance } => {
const { session } = useSupabase();

const [instance, setInstance] = useState(fetchInstance);

const baseURL = `${process.env.NEXT_PUBLIC_BACKEND_URL ?? ""}`;
const backendUrl = baseURL;

useEffect(() => {
 setInstance({
   ...fetchInstance,
   get: async (url, headers) =>
     fetchInstance.get(`${backendUrl}${url}`, {
       Authorization: `Bearer ${session?.access_token ?? ""}`,
       ...headers,
     }),
   post: async (url, body, headers) =>
     fetchInstance.post(`${backendUrl}${url}`, body, {
       Authorization: `Bearer ${session?.access_token ?? ""}`,
       ...headers,
     }),
   put: async (url, body, headers) =>
     fetchInstance.put(`${backendUrl}${url}`, body, {
       Authorization: `Bearer ${session?.access_token ?? ""}`,
       ...headers,
     }),
   delete: async (url, headers) =>
     fetchInstance.delete(`${backendUrl}${url}`, {
       Authorization: `Bearer ${session?.access_token ?? ""}`,
       ...headers,
     }),
 });
}, [session, backendUrl]);

return { fetchInstance: instance };
};

Use the useFetch Hook in Your Components:

Import and use the useFetch hook in your components to make API requests. Here is an example of how to use it:

import React, { useEffect } from "react";
import { useFetch } from "@/lib/hooks/useFetch";

const MyComponent = () => {
const { fetchInstance } = useFetch();

useEffect(() => {
 const fetchData = async () => {
   try {
     const response = await fetchInstance.get("/user/identity");
     if (!response.ok) {
       throw new Error("Network response was not ok");
     }
     const data = await response.json();
     console.log(data);
   } catch (error) {
     console.error("Fetch error:", error);
   }
 };

 fetchData();
}, [fetchInstance]);

return <div>Check the console for user identity data.</div>;
};

export default MyComponent;

By following these steps, you ensure that your frontend is correctly configured to use the backend URL and include the necessary authorization headers in your fetch requests ^[1].

To continue talking to Dosu, mention @dosu.

Make sure supabase is started with supabase start by run it in the backend folder

@StanGirard

How i can add authentication in supabase dashboard? I try deploy this in local dev and try deploy in digital ocean

QuivrHQ / quivr