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
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
