Skip to content

Commit

Permalink
Merge pull request #19 from aswanthabam/authentication-issues
Browse files Browse the repository at this point in the history
Fix : Authentication Issues
  • Loading branch information
aswanthabam authored Dec 5, 2023
2 parents 24f69b9 + 849a066 commit 188d91b
Show file tree
Hide file tree
Showing 6 changed files with 133 additions and 67 deletions.
58 changes: 27 additions & 31 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
// import { useState } from 'react'
import "./App.css";
import "./app-variables.css";
import { Route, Routes, useNavigate } from "react-router-dom";
import { Route, Routes, useLocation, useNavigate } from "react-router-dom";
import Home from "./pages/home/Home";
import About from "./pages/about/About";
import Error404 from "./pages/errors/404/Error404";
Expand All @@ -21,6 +20,7 @@ import Login from "./pages/login/Login";
import Sidebar from "./components/sidebar/Sidebar";
import Dashboard from "./pages/dashboard/Dashboard";
import { LoginStatus } from "./apis/api";
import { GoogleIdentity, isLoggedIn } from "./utils/utils";

function getTheme() {
var theme = localStorage.getItem("theme");
Expand All @@ -33,6 +33,7 @@ function getTheme() {
return "dark";
}
}

function App() {
const [theme, setThemeState] = useState("dark");
var { setLoaderStatus } = useLoader();
Expand All @@ -43,42 +44,37 @@ function App() {
setThemeState(theme);
localStorage.setItem("theme", theme);
};

var location = useLocation();
useEffect(() => {
var the = getTheme();
setTheme(the);
var script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client";
// console.log(script);
script.defer = true;
script.async = true;
script.onload = (data) => {
console.log(data);
(window as any).google.accounts.id.initialize({
client_id:
"1025507377861-ksv14u42p6c0bes203hkbki7n56u6v80.apps.googleusercontent.com",
callback: async (e: any) => {
console.log(e);
var status = await createAccountGoogle(
e["credential"],
setLoaderStatus,
setToastStatus
);
console.log(status);
if (status == LoginStatus.STEP1) redirect("/register/details");
else if (status == LoginStatus.STEP2) {
redirect("/dashboard");
console.log("EWEWE");
}
},
});
(window as any).google.accounts.id.prompt();
};
document.body.appendChild(script);
GoogleIdentity.initializeGoogleIdentity();
GoogleIdentity.setCallBack(async (e: any) => {
console.log(e);
var status = await createAccountGoogle(
e["credential"],
setLoaderStatus,
setToastStatus
);
console.log(status);
if (status == LoginStatus.STEP1) redirect("/register/details");
else if (status == LoginStatus.STEP2) {
redirect("/dashboard");
}
});
if (
location.pathname != "/dashboard" &&
location.pathname != "/register/details" &&
!isLoggedIn()
) {
console.log("Trigger google one tap");
GoogleIdentity.showGoogleOneTapPopup();
}
}, []);

return (
<div className={"app " + theme}>
<div id="google-login-button-hidden"></div>
{/* <ThemeLayer> */}
<Toast />
<TopLoader />
Expand Down
16 changes: 16 additions & 0 deletions src/components/buttons/GoogleButton/GoogleButton.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React, { useEffect, useRef } from "react";
import { GoogleIdentity } from "../../../utils/utils";

interface GoogleButtonProps {}

const GoogleButton: React.FC<GoogleButtonProps> = ({}) => {
const googleButtonRef = useRef<HTMLDivElement>(null);

useEffect(() => {
GoogleIdentity.renderGoogleSignInButton(googleButtonRef.current!);
}, []);

return <div ref={googleButtonRef} />;
};

export default GoogleButton;
19 changes: 1 addition & 18 deletions src/components/buttons/LoginButton/LoginButton.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import styles from "./LoginButton.module.css";
import React from "react";
import googleIcon from "../../../assets/google.png";

interface LoginButtonProps {
Expand All @@ -21,24 +22,6 @@ const LoginButton: React.FC<LoginButtonProps> = ({
<div className={styles.text}>
<span>{text}</span>
</div>
{/* <div
className="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin"
data-size="large"
data-logo_alignment="left"
></div> */}
{/* <div
id="g_id_onload"
data-client_id="1025507377861-ksv14u42p6c0bes203hkbki7n56u6v80.apps.googleusercontent.com"
data-context="signup"
data-ux_mode="popup"
data-callback={googleSignIn}
data-auto_select="true"
data-itp_support="true"
></div> */}
</div>
);
};
Expand Down
11 changes: 2 additions & 9 deletions src/pages/login/Login.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { loginEmail } from "../../apis/userApi";
import { useLoader } from "../../components/toploader/useLoader";
import { useToast } from "../../components/toast/useToast";
import { LoginStatus } from "../../apis/api";
import GoogleButton from "../../components/buttons/GoogleButton/GoogleButton";

interface LoginProps {}

Expand Down Expand Up @@ -97,15 +98,7 @@ const Login: React.FC<LoginProps> = ({}) => {
<span>
Don't have an account? <Link to="/register">Register</Link>
</span>
<div
className="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin"
data-size="large"
data-logo_alignment="left"
></div>
<GoogleButton />
</form>
</div>
</div>
Expand Down
11 changes: 2 additions & 9 deletions src/pages/register/Register.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { _EventInfo, _UserDetails, _UserStep1 } from "../../utils/types";
import { createAccount } from "../../apis/userApi";
import { useLoader } from "../../components/toploader/useLoader";
import { useToast } from "../../components/toast/useToast";
import GoogleButton from "../../components/buttons/GoogleButton/GoogleButton";

interface RegisterProps {}

Expand Down Expand Up @@ -101,15 +102,7 @@ const Register: React.FC<RegisterProps> = ({}) => {
<span>
Already have an account? <Link to="/login">Login</Link>
</span>
<div
className="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin"
data-size="large"
data-logo_alignment="left"
></div>
<GoogleButton />
</form>
</div>
</div>
Expand Down
85 changes: 85 additions & 0 deletions src/utils/utils.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
export class GoogleIdentity {
static initializer: Promise<boolean> | null;
static is_initialized: boolean = false;
static callbackFuncion: ((response: any) => void) | null = null;

constructor() {
GoogleIdentity.initializer = GoogleIdentity.initializeGoogleIdentity().then(
(val) => {
GoogleIdentity.is_initialized = val;
return val;
}
);
}

/*
Initialize google identity service
*/

static initializeGoogleIdentity(): Promise<boolean> {
return new Promise<boolean>((resolve) => {
var script = document.createElement("script");
script.src = "https://accounts.google.com/gsi/client";
script.defer = true;
script.async = true;
script.onload = () => {
(window as any).google.accounts.id.initialize({
client_id:
"1025507377861-ksv14u42p6c0bes203hkbki7n56u6v80.apps.googleusercontent.com",
callback: GoogleIdentity.callbackFuncion,
});
console.log("Google Identity initialized");
resolve(true);
};
document.body.appendChild(script);
});
}

/*
Call back function that handles google sign in action
*/

static setCallBack(callbackFuncion: (response: any) => void) {
GoogleIdentity.callbackFuncion = callbackFuncion;
}

/*
Show google one tap popup for sign in
*/

static showGoogleOneTapPopup() {
if (!GoogleIdentity.initializer) new GoogleIdentity();
GoogleIdentity.initializer!.then((val) => {
if (val) {
(window as any).google.accounts.id.prompt();
}
});
}

/*
Render google sign in button
*/

static renderGoogleSignInButton(parentElement: HTMLElement) {
if (!GoogleIdentity.initializer) new GoogleIdentity();
GoogleIdentity.initializer!.then((val) => {
if (val) {
(window as any).google.accounts.id.renderButton(parentElement, {
theme: "dark",
size: "large",
type: "standard",
text: "signin",
shape: "pill",
longtitle: false,
onsuccess: GoogleIdentity.callbackFuncion,
});
} else {
console.log("Google Identity not initialized");
}
});
}
}

export const isLoggedIn = () => {
return localStorage.getItem("token") ? true : false;
};

0 comments on commit 188d91b

Please sign in to comment.