109 lines
2.9 KiB
JavaScript
109 lines
2.9 KiB
JavaScript
import React, { Component } from 'react';
|
|
import GoogleAuthContext from '../contexts/GoogleAuthContext.js';
|
|
|
|
class GoogleAuthProvider extends Component {
|
|
constructor(props) {
|
|
super(props);
|
|
this.state = {
|
|
isLoaded: false,
|
|
error: null,
|
|
loadingStarted: false
|
|
};
|
|
|
|
// Initialize Google API client ID
|
|
this.clientId = props.clientId;
|
|
}
|
|
|
|
componentDidMount() {
|
|
// Load the Google Sign-In API script
|
|
this.loadGoogleScript();
|
|
}
|
|
|
|
loadGoogleScript = () => {
|
|
// Prevent multiple load attempts
|
|
if (this.state.loadingStarted) {
|
|
return;
|
|
}
|
|
|
|
this.setState({ loadingStarted: true });
|
|
|
|
// Check if the script is already loaded
|
|
if (window.google && window.google.accounts && window.google.accounts.id) {
|
|
this.setState({ isLoaded: true });
|
|
return;
|
|
}
|
|
|
|
if (document.getElementById('google-auth-script')) {
|
|
// Script tag exists but may not be fully loaded yet
|
|
const checkGoogleLoaded = setInterval(() => {
|
|
if (window.google && window.google.accounts && window.google.accounts.id) {
|
|
this.setState({ isLoaded: true });
|
|
clearInterval(checkGoogleLoaded);
|
|
}
|
|
}, 100);
|
|
|
|
// Set a timeout to stop checking after a reasonable time
|
|
setTimeout(() => {
|
|
clearInterval(checkGoogleLoaded);
|
|
if (!this.state.isLoaded) {
|
|
this.setState({
|
|
error: new Error('Timeout waiting for Google Sign-In API to load'),
|
|
isLoaded: false
|
|
});
|
|
}
|
|
}, 10000); // 10 second timeout
|
|
|
|
return;
|
|
}
|
|
|
|
// Create and add the script tag
|
|
const script = document.createElement('script');
|
|
script.src = 'https://accounts.google.com/gsi/client';
|
|
script.id = 'google-auth-script';
|
|
script.async = true;
|
|
script.defer = true;
|
|
|
|
script.onload = () => {
|
|
// Give a small delay to ensure the API is fully initialized
|
|
setTimeout(() => {
|
|
if (window.google && window.google.accounts && window.google.accounts.id) {
|
|
this.setState({ isLoaded: true });
|
|
} else {
|
|
this.setState({
|
|
error: new Error('Google Sign-In API loaded but not initialized properly'),
|
|
isLoaded: false
|
|
});
|
|
}
|
|
}, 100);
|
|
};
|
|
|
|
script.onerror = () => {
|
|
this.setState({
|
|
error: new Error('Failed to load Google Sign-In API script'),
|
|
isLoaded: false
|
|
});
|
|
};
|
|
|
|
document.body.appendChild(script);
|
|
};
|
|
|
|
render() {
|
|
const { children } = this.props;
|
|
const { isLoaded, error } = this.state;
|
|
|
|
// Context value includes loading state, clientId and any errors
|
|
const contextValue = {
|
|
clientId: this.clientId,
|
|
isLoaded,
|
|
error
|
|
};
|
|
|
|
return (
|
|
<GoogleAuthContext.Provider value={contextValue}>
|
|
{children}
|
|
</GoogleAuthContext.Provider>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default GoogleAuthProvider;
|