1const providers = await client.collection("devs").listAuthMethods()

1const startLogin = (prov:ProvType) => {
2   localStorage.setItem("provider",JSON.stringify(prov));
3  const redirectUrl = "http://localhost:3000/redirect";
4  const url = prov.authUrl + redirectUrl;
5      // console.log("prov in button === ", prov)
6      // console.log("combined url ==== >>>>>>  ",url)
7  
8    if (typeof window !== "undefined") {
9      window.location.href = url;
10    }
11  };

1
2    <div className="w-full h-fit md:h-full flex flex-wrap items-center justify-center gap-2 ">
3
4      {provs &&
5        provs?.map((item:any) => {
6          return (
7            <div
8              key={item.name}
9              onClick={() => startLogin(item)} 
10              className="p-2 w-[50%] md:w-[30%] cursor-pointer
11               bg-slate-600 rounded-lg hover:bg-slate-800 
12             capitalize text-xl font-bold flex items-center justify-center gap-2"
13            >
14            <TheIcon
15            iconstyle="" 
16            Icon={providerIcons[item.name as keyof typeof providerIcons]}
17            size={'30'}
18            />
19              {item.name}
20            </div>
21          );
22        })}
23    </div>

1Redirect.tsx
2
3
4
5import React, { useEffect } from 'react'
6import { useNavigate } from 'react-router-dom';
7import { PBUser } from '../../utils/types/types';
8import { useQueryClient } from '@tanstack/react-query';
9import { client } from './../../utils/pb/config';
10import { LoadingRipples } from '@denniskinuthia/tiny-pkgs';
11import { redirect_url } from '../../utils/env';
12import { login_url } from './../../utils/env';
13
14interface RedirectProps {
15user?:PBUser
16}
17
18export const Redirect: React.FC<RedirectProps> = ({user}) => {
19const queryClient = useQueryClient()
20const navigate = useNavigate()
21const local_prov = JSON.parse(localStorage.getItem('provider') as string)
22const url = new URL(window.location.href);
23const code = url.searchParams.get('code') as string
24const state = url.searchParams.get('state') as string
25
26
27// this hasto match what you orovided in the oauth provider , in tis case google
28let redirectUrl = redirect_url
29useEffect(()=>{
30    const pbOauthLogin=async()=>{
31   client.autoCancellation(false)
32    const oauthRes = await client.collection('devs')
33    .authWithOAuth2(local_prov.name, code, local_prov.codeVerifier, redirectUrl)
34        await client.collection('devs').update(oauthRes?.record.id as string, {
35            avatar: oauthRes.meta?.avatarUrl,
36            accessToken: oauthRes.meta?.accessToken
37        })
38    queryClient.setQueryData(['user'], client.authStore.model)
39    navigate('/')
40
41    }
42
43
44    if (local_prov.state !== state) {
45      const url = login_url
46     if (typeof window !== 'undefined') {
47            window.location.href = url;
48        }
49    }
50    else {
51    pbOauthLogin().catch((e) => {
52    console.log("error logging in with provider  == ", e)
53    })
54    }
55
56},[])
57
58
59
60
61
62return (
63 <div className='w-full h-full flex items-center justify-center'>
64<LoadingRipples/>
65</div>
66);
67}
68

1RootLayout.tsx
2
3
4import React from 'react'
5import { Outlet, useNavigate } from 'react-router-dom';
6import { Toolbar } from '../../components/toolbar/Toolbar';
7import { PBUser } from '../../utils/types/types';
8
9
10
11interface RootLayoutProps {
12user : PBUser
13test_mode:boolean
14}
15
16export const RootLayout: React.FC<RootLayoutProps> = ({user,test_mode}) => {
17    const navigate = useNavigate()
18    React.useEffect(() => {
19        if (!user?.email&&!test_mode) {
20            navigate('/auth')
21        }
22    }, [user?.email])
23
24return (
25    <div className='w-full h-screen max-h-screen dark:bg-slate-900'>
26        <div className='h-14 w-full  bg-slate-700 dark:bg-slate-800  
27          bg-opacity-30 dark:bg-opacity-90 max-h-[50px] p-1
28         sticky top-0 z-40'>
29        <Toolbar user={user} />
30        </div>
31        <main className=' w-full h-full fixed top-12'>
32            <Outlet />
33        </main>
34    </div>
35);
36}
37