From 6a0d4dc3a1b5a7880bb601ad71403be3af2fce6a Mon Sep 17 00:00:00 2001 From: otsembo Date: Tue, 28 Feb 2023 11:29:59 +0300 Subject: [PATCH 1/7] Auth: Resize forms and add Google Auth to register --- src/hooks/{ => auth}/useLoginWithGithub.ts | 2 +- src/views/Login.tsx | 26 ++++++------ src/views/Register.tsx | 48 ++++++++++++++++++---- 3 files changed, 56 insertions(+), 20 deletions(-) rename src/hooks/{ => auth}/useLoginWithGithub.ts (95%) diff --git a/src/hooks/useLoginWithGithub.ts b/src/hooks/auth/useLoginWithGithub.ts similarity index 95% rename from src/hooks/useLoginWithGithub.ts rename to src/hooks/auth/useLoginWithGithub.ts index 3d0da3c..0859f66 100644 --- a/src/hooks/useLoginWithGithub.ts +++ b/src/hooks/auth/useLoginWithGithub.ts @@ -1,6 +1,6 @@ import { useNavigate } from 'react-router-dom'; import { GithubAuthProvider, signInWithPopup } from "firebase/auth"; -import { auth } from "../utils/firebase"; +import { auth } from "../../utils/firebase"; import { useCallback, useState } from "react"; export const useLoginWithGithub = () => { diff --git a/src/views/Login.tsx b/src/views/Login.tsx index ecd5c72..6af00d3 100644 --- a/src/views/Login.tsx +++ b/src/views/Login.tsx @@ -1,12 +1,11 @@ -import React from "react"; +import React, {FormEvent} from "react"; import { FcGoogle } from "react-icons/fc"; import { GoMarkGithub } from 'react-icons/go' import { AiFillFacebook } from "react-icons/ai"; import {signInWithPopup, GoogleAuthProvider } from "firebase/auth"; import { auth } from "../utils/firebase"; -import { useNavigate } from "react-router-dom"; -// import uselogin -import {useLoginWithGithub} from '../hooks/useLoginWithGithub' +import {Link, useNavigate} from "react-router-dom"; +import {useLoginWithGithub} from '../hooks/auth/useLoginWithGithub' function Login() { @@ -35,18 +34,19 @@ function Login() { {gitHubLoginError &&

{gitHubLoginError}

}
-
+ ) => e.preventDefault()}>

THE FORCE

-

+ + +

@@ -72,7 +72,9 @@ function Login() { Remember Me

-

Create an account

+ +

Create an account

+
diff --git a/src/views/Register.tsx b/src/views/Register.tsx index 4cc7a6c..ea6cd82 100644 --- a/src/views/Register.tsx +++ b/src/views/Register.tsx @@ -1,16 +1,50 @@ -import React from "react"; +import React, {FormEvent} from "react"; // import {Link} from 'react-router-dom' import { FcGoogle } from "react-icons/fc"; import { AiFillFacebook } from "react-icons/ai"; +import {Link, useNavigate} from "react-router-dom"; +import {GoMarkGithub} from "react-icons/go"; +import {GoogleAuthProvider, signInWithPopup} from "firebase/auth"; +import {auth} from "../utils/firebase"; +import {useLoginWithGithub} from "../hooks/auth/useLoginWithGithub"; + function Register() { + const navigate: any = useNavigate(); + const provider: any= new GoogleAuthProvider(); + provider.addScope('https://www.googleapis.com/auth/contacts.readonly'); + + const {loginWithGithub, error:gitHubLoginError} = useLoginWithGithub() + const onLogin = async () => { + await signInWithPopup(auth, provider) + .then((result: any) =>{ + // const credential: any | null = GoogleAuthProvider.credentialFromResult(result); + // const token = credential.accessToken; + // const user = result.user + navigate("/") + + }).catch((error: any)=>{ + // const email = error.customData./email; + // const credential: any | null = GoogleAuthProvider.credentialFromError(error); + + }) + }; + return (
-
+ ) => e.preventDefault()}>

THE FORCE

- Google - Facebook + + +
@@ -27,9 +61,9 @@ function Register() {
- + +

Login to your existing account

+
From 5166fa595c54fe34a923bc56d6d9b39b0b30c301 Mon Sep 17 00:00:00 2001 From: otsembo Date: Tue, 28 Feb 2023 11:55:33 +0300 Subject: [PATCH 2/7] Refactor Google auth into hook --- .idea/workspace.xml | 32 ++++++++++++++-------------- src/hooks/auth/useLoginWithGoogle.ts | 21 ++++++++++++++++++ src/views/Login.tsx | 28 +++++------------------- src/views/Register.tsx | 30 +++++--------------------- 4 files changed, 47 insertions(+), 64 deletions(-) create mode 100644 src/hooks/auth/useLoginWithGoogle.ts diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 0024d34..5c3be6c 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -6,8 +6,6 @@ - - - { - "keyToString": { - "ASKED_MARK_IGNORED_FILES_AS_EXCLUDED": "true", - "RunOnceActivity.OpenProjectViewOnStart": "true", - "RunOnceActivity.ShowReadmeOnStart": "true", - "WebServerToolWindowFactoryState": "false", - "node.js.detected.package.eslint": "true", - "node.js.detected.package.tslint": "true", - "node.js.selected.package.eslint": "(autodetect)", - "node.js.selected.package.tslint": "(autodetect)", - "nodejs_package_manager_path": "npm", - "ts.external.directory.path": "/home/okush/WebstormProjects/the-force/node_modules/typescript/lib", - "vue.rearranger.settings.migration": "true" + +}]]> @@ -55,6 +53,8 @@ + + 1674627291680 diff --git a/src/hooks/auth/useLoginWithGoogle.ts b/src/hooks/auth/useLoginWithGoogle.ts new file mode 100644 index 0000000..d0c0fd2 --- /dev/null +++ b/src/hooks/auth/useLoginWithGoogle.ts @@ -0,0 +1,21 @@ +import { signInWithPopup, GoogleAuthProvider } from "firebase/auth"; +import { auth } from "../../utils/firebase"; +import { useNavigate } from "react-router-dom"; + +export const useLoginWithGoogle = () => { + const navigate = useNavigate() + + // set up provider + const provider: GoogleAuthProvider = new GoogleAuthProvider() + provider.addScope(process.env.REACT_APP_GOOGLE_AUTH_SCOPE as string) + + // log in with Google using popup + return async () => { + await signInWithPopup(auth, provider) + .then((_r) => { + navigate('/') + }) + .catch((error) => false) + }; + +} \ No newline at end of file diff --git a/src/views/Login.tsx b/src/views/Login.tsx index 6af00d3..5a85b22 100644 --- a/src/views/Login.tsx +++ b/src/views/Login.tsx @@ -1,34 +1,16 @@ import React, {FormEvent} from "react"; import { FcGoogle } from "react-icons/fc"; -import { GoMarkGithub } from 'react-icons/go' +import { GoMarkGithub } from 'react-icons/go'; import { AiFillFacebook } from "react-icons/ai"; -import {signInWithPopup, GoogleAuthProvider } from "firebase/auth"; -import { auth } from "../utils/firebase"; -import {Link, useNavigate} from "react-router-dom"; -import {useLoginWithGithub} from '../hooks/auth/useLoginWithGithub' +import {Link} from "react-router-dom"; +import {useLoginWithGithub} from '../hooks/auth/useLoginWithGithub'; +import {useLoginWithGoogle} from "../hooks/auth/useLoginWithGoogle"; function Login() { - const navigate: any = useNavigate(); - const provider: any= new GoogleAuthProvider(); - provider.addScope('https://www.googleapis.com/auth/contacts.readonly'); const {loginWithGithub, error:gitHubLoginError} = useLoginWithGithub() - const onLogin = async () => { - await signInWithPopup(auth, provider) - .then((result: any) =>{ - // const credential: any | null = GoogleAuthProvider.credentialFromResult(result); - // const token = credential.accessToken; - // const user = result.user - navigate("/") - - }).catch((error: any)=>{ - // const email = error.customData./email; - // const credential: any | null = GoogleAuthProvider.credentialFromError(error); - - }) - }; return (
{gitHubLoginError &&

{gitHubLoginError}

} @@ -38,7 +20,7 @@ function Login() { onSubmit={ (e: FormEvent) => e.preventDefault()}>

THE FORCE

- - - -
@@ -38,11 +44,11 @@ function Login() { setPassword(e.target.value) } />
@@ -53,6 +59,12 @@ function Login() {

Create an account

+ + { error ? + Oops. An error occurred.
+ {error["code"]} + : <> } +
diff --git a/src/views/Register.tsx b/src/views/Register.tsx index 6850788..24b8c81 100644 --- a/src/views/Register.tsx +++ b/src/views/Register.tsx @@ -1,23 +1,31 @@ -import React, {FormEvent} from "react"; +import React, {useState} from "react"; import {FcGoogle} from "react-icons/fc"; import {AiFillFacebook} from "react-icons/ai"; import {GoMarkGithub} from "react-icons/go"; import {Link} from "react-router-dom"; -import {AuthType, useAuth} from "../hooks/auth/useAuth"; +import {AuthType, useSocialAuth} from "../hooks/auth/useSocialAuth"; +import {useEmailPasswordAuth} from "../hooks/auth/useEmailPasswordAuth"; + function Register() { + const [email, setEmail] = useState("") + const [password, setPassword] = useState("") + const [confirmPassword, setConfirmPassword] = useState("") + const [error, setError] = useState(null) + return (
) => e.preventDefault()}> + method={'post'} + onSubmit={useEmailPasswordAuth(false, email, password, setError)}>

THE FORCE

- -

Login to your existing account

+ + { error ? + Oops. An error occurred.
+ {error["code"]} + : <> } +
From ae1a1d35807dc55e9366ccda86e960c16d039220 Mon Sep 17 00:00:00 2001 From: otsembo Date: Tue, 28 Feb 2023 16:39:23 +0300 Subject: [PATCH 5/7] Auth: Remove Facebook buttons. --- .idea/workspace.xml | 77 ++++++++++++++++++++++++++++++++---------- src/views/Login.tsx | 6 +--- src/views/Register.tsx | 4 --- 3 files changed, 61 insertions(+), 26 deletions(-) diff --git a/.idea/workspace.xml b/.idea/workspace.xml index 5c3be6c..d66c7a9 100644 --- a/.idea/workspace.xml +++ b/.idea/workspace.xml @@ -4,14 +4,23 @@