Fix the URl for google auth
This commit is contained in:
parent
13bfe66c9f
commit
46f7f51d3a
1 changed files with 76 additions and 72 deletions
|
@ -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,33 +363,8 @@ 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={() => {
|
||||||
|
|
Loading…
Add table
Reference in a new issue