Merge pull request #875 from exogee-technology/feat/login-with-redirect

Auth0 Login with Redirect

src/examples/auth-zero/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-example-auth-zero",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"private": true,
 	"description": "Example of connecting a SQLite database with Auth0.",

src/examples/auth-zero/src/admin-ui/custom-pages/index.tsx

@@ -1,7 +1,7 @@
 import { Auth, Auth0, Auth0Logout } from '@exogee/graphweaver-auth-ui-components';
 
 export const customPages = {
-	sidebarFooter: () => <Auth0Logout />,
+	sidebarFooter: () => <Auth0Logout redirectTo={`${window.location.origin}/auth/login`} />,
 	routes: () => [
 		{
 			path: '/auth',

src/examples/aws-cognito/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@exogee/graphweaver-example-aws-cognito",
 	"private": true,
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"description": "Example of connecting to AWS Cognito",
 	"main": "lib/index.js",

src/examples/databases/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-example-databases",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"private": true,
 	"description": "Example of connecting a MySQL and PostgreSQL database together.",

src/examples/federation/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@exogee/graphweaver-example-federation",
 	"private": true,
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"description": "Example app used to test federation compatibility",
 	"main": "lib/index.js",

src/examples/rest/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-example-rest",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"private": true,
 	"description": "Example of connecting a Rest API with a MySQL database.",

src/examples/s3-storage/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-example-s3-storage",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"private": true,
 	"description": "Example of connecting Graphweaver to an AWS S3 bucket.",

src/examples/sqlite/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-example-sqlite",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"private": true,
 	"description": "Example of connecting a SQLite database.",

src/examples/xero/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-example-xero",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"license": "MIT",
 	"private": true,
 	"description": "Example of using @exogee/graphweaver to connect two Xero instances",

src/packages/admin-ui-components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-admin-ui-components",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Components from Graphweaver's admin UI which you can use in your projects as you like",
 	"license": "MIT",
 	"type": "module",

src/packages/admin-ui/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-admin-ui",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"type": "module",
 	"main": "dist/main.js",
 	"types": "src/main.tsx",

src/packages/apollo-client/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-apollo-client",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Useful helpers for working with Apollo Client and Graphweaver",
 	"license": "MIT",
 	"type": "module",

src/packages/auth-ui-components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-auth-ui-components",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Components from Graphweaver's Auth UI which you can use in your projects as you like",
 	"license": "MIT",
 	"type": "module",

src/packages/auth-ui-components/src/components/auth-zero/login/component.tsx

@@ -1,48 +1,72 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Button } from '@exogee/graphweaver-admin-ui-components';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useSearchParams } from 'react-router-dom';
 import { getAuth0Client } from '../client';
 
 export const Auth0 = () => {
 	const [loading, setLoading] = useState(true);
 	const [error, setError] = useState<string | undefined>();
+
+	const [searchParams] = useSearchParams();
 	const shouldRedirect = useRef(true);
 	const navigate = useNavigate();
 
+	// In this effect we are checking if the user is coming back from the Auth0 login page or
+	// if the user is coming to the page for the first time. If the user is coming back from
+	// the Auth0 login page, we process the redirect. If the user is coming to the page for the
+	// first time, we redirect the user to the Auth0 login page.
 	useEffect(() => {
 		if (shouldRedirect.current) {
 			shouldRedirect.current = false;
-			requestLogin();
+			const code = searchParams.get('code');
+			const state = searchParams.get('state');
+
+			if (code && state) {
+				// The user is coming back from the Auth0 login page
+				processRedirect();
+			} else {
+				// The user is coming to the page for the first time
+				requestLogin();
+			}
 		}
 	}, []);
 
-	useEffect(() => {
-		if (!loading && !error) {
-			navigate('/');
+	// This function is called when the user clicks the login button or when the user is coming to the page for the first time
+	const requestLogin = useCallback(async () => {
+		try {
+			const client = await getAuth0Client();
+			const options = {
+				authorizationParams: {
+					redirect_uri: window.location.toString(),
+				},
+			};
+			await client.loginWithRedirect(options);
+		} catch (e: any) {
+			if (e.message) setError(e.message);
+			setLoading(false);
 		}
-	}, [loading, error]);
+	}, []);
 
-	const requestLogin = useCallback(async () => {
+	// This function is called when the user is coming back from the Auth0 login page and we need to process the redirect
+	// This function will handle the redirect and redirect the user to the home page
+	const processRedirect = useCallback(async () => {
 		try {
 			const client = await getAuth0Client();
-			await client.loginWithPopup();
+			await client.handleRedirectCallback();
+			navigate('/');
 		} catch (e: any) {
 			if (e.message) setError(e.message);
 		} finally {
 			setLoading(false);
 		}
 	}, []);
 
-	const handleRetry = () => {
-		requestLogin();
-	};
-
 	if (loading) return <div>Loading...</div>;
 
 	return (
 		<div>
 			{error && <div>{error}</div>}
-			<Button onClick={handleRetry}>Retry</Button>
+			<Button onClick={requestLogin}>Login</Button>
 		</div>
 	);
 };

src/packages/auth-ui-components/src/components/auth-zero/logout/component.tsx

@@ -1,10 +1,16 @@
 import { Logout } from '../../logout';
 import { getAuth0Client } from '../client';
 
-export const Auth0Logout = () => {
+type Auth0LogoutProps = {
+	redirectTo?: string;
+};
+
+export const Auth0Logout = ({ redirectTo }: Auth0LogoutProps) => {
 	const handleLogout = async () => {
 		const client = await getAuth0Client();
-		await client.logout();
+		await client.logout({
+			logoutParams: { returnTo: redirectTo ?? window.location.origin },
+		});
 	};
 
 	return <Logout onLogout={handleLogout} />;

src/packages/auth-ui-components/src/components/logout/component.tsx

@@ -18,11 +18,13 @@ export const Logout = ({ onLogout }: LogoutProps) => {
 
 	const handleOnLogout = async () => {
 		try {
-			if (onLogout) await onLogout();
 			localStorage.removeItem(localStorageAuthKey);
 			await apolloClient.clearStore();
-			await apolloClient.resetStore();
-			navigate(0);
+			if (onLogout) {
+				await onLogout();
+			} else {
+				navigate(0);
+			}
 		} catch (error: any) {
 			const message = error?.message || 'Unknown error.';
 			toast.error(`Failed to logout. Please try again. Error: ${message}`, {

src/packages/auth/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-auth",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Row-Level Security support for @exogee/graphweaver",
 	"license": "MIT",
 	"scripts": {

src/packages/aws-cognito/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-aws",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"main": "lib/index.js",
 	"source": "src/index.ts",
 	"directories": {

src/packages/builder/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-builder",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "A tool for building and running Graphweaver projects",
 	"license": "MIT",
 	"scripts": {

src/packages/cli/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "graphweaver",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "A tool for managing, running, debugging and building Graphweaver projects",
 	"license": "MIT",
 	"scripts": {

src/packages/config/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-config",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Retrieve and parse Graphweaver configurations",
 	"license": "MIT",
 	"scripts": {

src/packages/core/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Graphweaver Core Package",
 	"license": "MIT",
 	"scripts": {

src/packages/end-to-end/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-end-to-end",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Graphweaver Test Suite",
 	"license": "MIT",
 	"scripts": {

src/packages/logger/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/logger",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Common logging output for Exogee projects",
 	"license": "MIT",
 	"directories": {

src/packages/mikro-orm-sqlite-wasm/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "mikro-orm-sqlite-wasm",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "MikroORM SQLite Driver Wasm",
 	"license": "MIT",
 	"scripts": {

src/packages/mikroorm/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-mikroorm",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "MikroORM backend for @exogee/graphweaver",
 	"license": "MIT",
 	"scripts": {

src/packages/rest/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-rest",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "RESTful backend for @exogee/graphweaver",
 	"license": "MIT",
 	"scripts": {

src/packages/scalars/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-scalars",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Common scalar types for use with @exogee/graphweaver",
 	"license": "MIT",
 	"main": "lib/index.js",

src/packages/server/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-server",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Server support for @exogee/graphweaver",
 	"license": "MIT",
 	"scripts": {

src/packages/storage-provider/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-storage-provider",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Graphweaver Storage Provider Package",
 	"license": "MIT",
 	"scripts": {

src/packages/vite-plugin-graphweaver/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vite-plugin-graphweaver",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "A vite plugin for use with @exogee/graphweaver's admin UI",
 	"license": "MIT",
 	"main": "lib/index.js",

src/packages/xero/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@exogee/graphweaver-xero",
-	"version": "2.0.3",
+	"version": "2.0.4",
 	"description": "Xero backend for @exogee/graphweaver",
 	"license": "MIT",
 	"scripts": {