amy/donetick-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix the URl for google auth

Browse source
This commit is contained in:
Mo Tarbin 2025-01-10 00:38:13 -05:00
parent 13bfe66c9f
commit 46f7f51d3a
1 changed files with 76 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

148
src/views/Authorization/LoginView.jsx
View file

@ -1,3 +1,6 @@
import { Capacitor } from '@capacitor/core'
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'
import { Settings } from '@mui/icons-material'
import GoogleIcon from '@mui/icons-material/Google' import GoogleIcon from '@mui/icons-material/Google'
import { import {
Avatar, Avatar,
@ -15,15 +18,11 @@ import Cookies from 'js-cookie'
import React from 'react' import React from 'react'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { LoginSocialGoogle } from 'reactjs-social-login' import { LoginSocialGoogle } from 'reactjs-social-login'
import { API_URL, GOOGLE_CLIENT_ID, REDIRECT_URL } from '../../Config' import { GOOGLE_CLIENT_ID, REDIRECT_URL } from '../../Config'
import { UserContext } from '../../contexts/UserContext' import { UserContext } from '../../contexts/UserContext'
import Logo from '../../Logo' import Logo from '../../Logo'
import { GetUserProfile, login } from '../../utils/Fetcher' import { GetUserProfile, login } from '../../utils/Fetcher'
import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'; import { apiManager } from '../../utils/TokenManager'
import { Capacitor } from '@capacitor/core'
import { Settings } from '@mui/icons-material'
const LoginView = () => { const LoginView = () => {
const { userProfile, setUserProfile } = React.useContext(UserContext) const { userProfile, setUserProfile } = React.useContext(UserContext)
@ -34,7 +33,6 @@ const LoginView = () => {
const handleSubmit = async e => { const handleSubmit = async e => {
e.preventDefault() e.preventDefault()
login(username, password) login(username, password)
.then(response => { .then(response => {
if (response.status === 200) { if (response.status === 200) {
return response.json().then(data => { return response.json().then(data => {
@ -63,7 +61,8 @@ const LoginView = () => {
} }
const loggedWithProvider = function (provider, data) { const loggedWithProvider = function (provider, data) {
return fetch(API_URL + `/auth/${provider}/callback`, { const baseURL = apiManager.getApiURL()
return fetch(`${baseURL}/auth/${provider}/callback`, {
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
@ -141,20 +140,21 @@ const LoginView = () => {
boxShadow: 'md', boxShadow: 'md',
}} }}
> >
<IconButton <IconButton
// on top right of the screen: // on top right of the screen:
sx={{ sx={{
position: 'absolute', position: 'absolute',
top: 2, top: 2,
right: 2, right: 2,
color: 'black', color: 'black',
}} }}
onClick={() => { onClick={() => {
Navigate('/login/settings') Navigate('/login/settings')
}}
} >
} {' '}
> <Settings /></IconButton> <Settings />
</IconButton>
{/* <img {/* <img
src='/src/assets/logo.svg' src='/src/assets/logo.svg'
alt='logo' alt='logo'
@ -301,32 +301,61 @@ const LoginView = () => {
)} )}
<Divider> or </Divider> <Divider> or </Divider>
{!Capacitor.isNativePlatform() && ( {!Capacitor.isNativePlatform() && (
<Box sx={{ width: '100%' }}> <Box sx={{ width: '100%' }}>
<LoginSocialGoogle <LoginSocialGoogle
client_id={GOOGLE_CLIENT_ID} client_id={GOOGLE_CLIENT_ID}
redirect_uri={REDIRECT_URL} redirect_uri={REDIRECT_URL}
scope='openid profile email' scope='openid profile email'
discoveryDocs='claims_supported' discoveryDocs='claims_supported'
access_type='online' access_type='online'
isOnlyGetToken={true} isOnlyGetToken={true}
onResolve={({ provider, data }) => { onResolve={({ provider, data }) => {
loggedWithProvider(provider, data) loggedWithProvider(provider, data)
}} }}
onReject={err => { onReject={err => {
setError("Couldn't log in with Google, please try again") setError("Couldn't log in with Google, please try again")
}} }}
> >
<Button
variant='soft'
color='neutral'
size='lg'
fullWidth
sx={{
width: '100%',
mt: 1,
mb: 1,
border: 'moccasin',
borderRadius: '8px',
}}
>
<div className='flex gap-2'>
<GoogleIcon />
Continue with Google
</div>
</Button>
</LoginSocialGoogle>
</Box>
)}
{Capacitor.isNativePlatform() && (
<Box sx={{ width: '100%' }}>
<Button <Button
variant='soft'
color='neutral'
size='lg'
fullWidth fullWidth
sx={{ variant='soft'
width: '100%', size='lg'
mt: 1, sx={{ mt: 3, mb: 2 }}
mb: 1, onClick={() => {
border: 'moccasin', GoogleAuth.initialize({
borderRadius: '8px', clientId: import.meta.env.VITE_APP_GOOGLE_CLIENT_ID,
scopes: ['profile', 'email', 'openid'],
grantOfflineAccess: true,
})
GoogleAuth.signIn().then(user => {
console.log('Google user', user)
loggedWithProvider('google', user.authentication)
})
}} }}
> >
<div className='flex gap-2'> <div className='flex gap-2'>
@ -334,34 +363,9 @@ const LoginView = () => {
Continue with Google Continue with Google
</div> </div>
</Button> </Button>
</LoginSocialGoogle> </Box>
</Box> )}
{Capacitor.isNativePlatform() && (
<Box sx={{ width: '100%' }}>
<Button fullWidth variant='soft' size='lg' sx={{ mt: 3, mb: 2 }}
onClick={()=>{
GoogleAuth.initialize({
clientId: import.meta.env.VITE_APP_GOOGLE_CLIENT_ID,
scopes: ['profile', 'email','openid'],
grantOfflineAccess: true,
});
GoogleAuth.signIn().then((user) => {
console.log("Google user", user);
loggedWithProvider("google", user.authentication)
});
}}>
<div className='flex gap-2'>
<GoogleIcon />
Continue with Google
</div>
</Button>
</Box>
)} )}
<Button <Button
onClick={() => { onClick={() => {
Navigate('/signup') Navigate('/signup')