1import { useState } from 'react'
2import { Query, useQuery } from 'react-query';
3import { Routes, Route, BrowserRouter } from "react-router-dom";
4import './App.css'
5import { About } from './components/about/About';
6import { Login } from './components/auth/Login';
7import { Protected } from './components/auth/Protected';
8import { Redirect } from './components/auth/Redirect';
9import { UserType } from './components/auth/types';
10import { Home } from './components/home/Home';
11import { Toolbar } from './components/toolbar/Toolbar';
12import { client } from './pb/config';
13import { LoadingShimmer } from './components/Shared/LoadingShimmer';
14
15
16function App() {
17
18
19  const getUser = async()=>{
20    return await client.authStore.model
21  }
22
23const userQuery = useQuery(["user"],getUser); 
24  console.log("user query App.tsx==== ", userQuery)
25  
26  // console.log("client authstore",client.authStore)
27const user = userQuery.data
28
29if(userQuery.isFetching || userQuery.isFetching){
30  return <LoadingShimmer/>
31}
32
33return (
34    <div
35    className="h-screen w-screen   scroll-bar flex-col-center 
36    dark-styles transition duration-500 overflow-x-hidden "
37    >
38      <BrowserRouter >
39
40        <div className="fixed top-[0px] w-[100%] z-40 p-1">
41          <Toolbar />
42        </div>
43
44
45        <div className="w-full h-full mt-12 ">
46          <Routes>
47            <Route
48              path="/"
49               element={
50                <Protected user={user}>
51                  <Home />
52                </Protected>
53              }
54            />
55
56          <Route path="/about" element={<About />} />
57          <Route path="/login" element={<Login user={user}/>} />
58           <Route path="/redirect" element={<Redirect user= 
59          {user}/>} /> 
60          </Routes>
61        </div>
62
63      </BrowserRouter>
64    </div>
65  );
66}
67
68export default App
69

1import { User, Admin } from 'pocketbase';
2import React, { useEffect } from 'react'
3import { useQueryClient } from 'react-query';
4import { Navigate, useNavigate, useSearchParams } from 'react-router-dom';
5import { client } from '../../pb/config';
6import { LoadingShimmer } from '../Shared/loading/LoadingShimmer';
7
8
9interface RedirectProps {
10user?: User | Admin | null
11}
12
13export const Redirect: React.FC<RedirectProps> = ({user}) => {
14const [loading, setLoading] = React.useState(true)
15const queryClient = useQueryClient()
16const navigate = useNavigate()
17const [searchParams] = useSearchParams();
18const code = searchParams.get('code') as string
19const local_prov = JSON.parse(localStorage.getItem('provider') as string)
20// this hasto match what you orovided in the oauth provider , in tis case google
21let redirectUrl = 'http://localhost:3000/redirect'
22useEffect(()=>{
23    if (local_prov.state !== searchParams.get("state")) {
24      const url = 'http://localhost:3000/login'
25        if (typeof window !== 'undefined') {
26            window.location.href = url;
27        }
28    }
29    else {
30 
31      client.users.authViaOAuth2(
32            local_prov.name,
33            code,
34            local_prov.codeVerifier,
35            redirectUrl
36            )
37            .then((response) => {
38                // console.log("authentication data === ", response)
39                // udating te user rofile field in pocket base with custome data from your 
40                // oauth provider in this case the avatarUrl and name
41                client.records.update('profiles', response.user.profile?.id as string, {
42                    name: response.meta.name,
43                    avatarUrl: response.meta.avatarUrl,
44                    
45                }).then((res) => {
46                // console.log(" successfully updated profi;e", res)
47
48                }).catch((e) => {
49                    console.log("error updating profile  == ", e)
50                })
51                setLoading(false)
52                // console.log("client modal after logg   == ", client.authStore.model)
53                queryClient.setQueryData(['user'], client.authStore.model)
54                navigate('/')
55
56            }).catch((e) => {
57                console.log("error logging in with provider  == ", e)
58            })
59    }
60
61},[])
62if (user) {
63    return <Navigate to="/" replace />;
64}
65return (
66 <div className='w-full h-full '>
67        {loading ? <LoadingShimmer/>:null}
68 </div>
69);
70}
71

1import React from "react";
2import { providers } from "../../pb/config";
3import { useNavigate } from 'react-router-dom';
4import { Admin, User } from "pocketbase";
5
6
7
8
9interface LoginProps {
10user?: User | Admin | null
11}
12interface ProvType{
13
14    name: string
15    state: string
16    codeVerifier: string
17    codeChallenge: string
18    codeChallengeMethod: string
19    authUrl: string
20
21}
22
23export const Login: React.FC<
24  LoginProps
25> = ({user}) => {
26const provs = providers.authProviders;
27const navigate = useNavigate()
28// console.log("user in Login.tsx  ==  ",user)
29if(user?.email){
30  navigate('/')
31}
32const startLogin = (prov:ProvType) => { localStorage.setItem("provider",JSON.stringify(prov));
33  const redirectUrl = "http://localhost:3000/redirect";
34  const url = prov.authUrl + redirectUrl;
35      // console.log("prov in button === ", prov)
36      // console.log("combined url ==== >>>>>>  ",url)
37  
38    if (typeof window !== "undefined") {
39      window.location.href = url;
40    }
41  };
42
43  return (
44    <div className="w-full h-full flex-center-col">
45      <div className="text-3xl font-bold ">
46        LOGIN
47      </div>
48      {provs &&
49        provs?.map((item:any) => {
50          return (
51            <button 
52            className="p-2 bg-purple-600"
53            key={item.name}
54            onClick={() => startLogin(item)}>{item.name}</button>
55          );
56        })}
57    </div>
58  );
59};
60

1import { Admin, User } from 'pocketbase';
2import React, { ReactNode } from 'react'
3import { Navigate } from 'react-router-dom';
4
5interface ProtectedProps {
6    user?: User | Admin | null
7children:ReactNode
8}
9
10export const Protected: React.FC<ProtectedProps> = ({user,children}) => {
11if(!user?.email){
12 return <Navigate to={'/login'} />
13}
14return (
15 <div className='h-full w-full'>
16  {children}
17 </div>
18);
19}
20