Expense Tracker bug

[alexrobaina]

Remove the Title input because expenses haven't a title jet

[melisayu]

Hi, can I try to fix this bug?

[melisayu]

I need a little help with starting up the project. I have a problem with loging in locally.
I created a project on google console and created OAuth2.0 credential. And then I put GOOGLE_CLIENT_ID, GOOGLE_CLIENT_SECRET, and GOOGLE_CALLBACK_URI in the env file. Did I miss something?

[alexrobaina]

🤔 It's happening because you need to set up several issues on Google console.
But I think is not necessary.

In the main.tsx you can copy and paste for this code; after that, you have access to the private roots

import { observable } from 'mobx'
import React from 'react'
import ReactDOM from 'react-dom/client'
import { HelmetProvider } from 'react-helmet-async'
import { QueryClient, QueryClientProvider } from 'react-query'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'

import App from './App.tsx'
import { Navbar } from './components/Navbar/index.tsx'
import { AdoptionPetPage } from './pages/AdoptionPetPage/index.tsx'
import { CommunityPage } from './pages/CommunityPage/index.tsx'
import { LoginPage } from './pages/LoginPage/index.tsx'
import { ProfilePetPage } from './pages/ProfilePetPage/index.tsx'
import { UserProfilePage } from './pages/UserProfilePage/index.tsx'
import { AppContextProps } from './services/AppContext.tsx'
import { getCookie } from './utils/getCookie.ts'

import './index.css'
import './i18n.ts'
import 'react-toastify/dist/ReactToastify.css'

const queryClient = new QueryClient()

async function main() {
  let appContext: AppContextProps = observable({
    session: { token: '' },
    user: null,
  })

  const router = createBrowserRouter([
    {
      path: '/',
      element: <Navbar />,
      children: [
        {
          path: '/login',
          element: <LoginPage />,
        },
        {
          path: '/pet/:id',
          element: <ProfilePetPage />,
        },
        {
          path: '/user/:id',
          element: <UserProfilePage />,
        },
        {
          path: '/community',
          element: <CommunityPage />,
        },
        {
          path: '/',
          element: <AdoptionPetPage />,
        },
        {
          path: '*',
          element: <AdoptionPetPage />,
        },
      ],
    },
  ])

  // try {
  //   const token = getCookie('token')

  //   if (token) {
  //     const { data } = await axios.get('/api/auth/login/', {
  //       withCredentials: true,
  //       timeout: 5000,
  //       headers: {
  //         Authorization: `Bearer ${token}`,
  //       },
  //     })

  //     appContext = observable({
  //       session: { token: token },
  //       user: data.user,
  //     })
  //   } else {
  //     appContext = observable({
  //       session: { token: '' },
  //       user: null,
  //     })
  //     throw new Error('User not signed in')
  //   }
  // } catch (_e) {
  //   ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  //     <React.StrictMode>
  //       <HelmetProvider>
  //         <QueryClientProvider client={queryClient}>
  //           <RouterProvider router={router} />
  //         </QueryClientProvider>
  //       </HelmetProvider>
  //     </React.StrictMode>,
  //   )
  //   return
  // }

  return ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement,
  ).render(
    <QueryClientProvider client={queryClient}>
      <HelmetProvider>
        <App appContext={appContext} />
      </HelmetProvider>
    </QueryClientProvider>,
  )
}

void main()

[melisayu]

Could you please refer me to a documentation about what to set up exactly on google console?
Commenting those lines work but I think I will still need to be authorized to make API calls?

[alexrobaina]

Hi, sorry for the delay! I consider configuring the auth for this instance unnecessary. Another way to call the API without login is to comment on the auth middleware in the API routes file.