Merge pull request #131 from authorizerdev/feat/open-id

Add open id authorization flow with PKCE

Author: lakhansamani

app/package-lock.json

@@ -2,10 +2,33 @@ import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import { AuthorizerProvider } from '@authorizerdev/authorizer-react';
 import Root from './Root';
+import { createRandomString } from './utils/common';
 
 export default function App() {
-	// @ts-ignore
-	const globalState: Record<string, string> = window['__authorizer__'];
+	const searchParams = new URLSearchParams(window.location.search);
+	const state = searchParams.get('state') || createRandomString();
+	const scope = searchParams.get('scope')
+		? searchParams.get('scope')?.toString().split(' ')
+		: `openid profile email`;
+
+	const urlProps: Record<string, any> = {
+		state,
+		scope,
+	};
+
+	const redirectURL =
+		searchParams.get('redirect_uri') || searchParams.get('redirectURL');
+	if (redirectURL) {
+		urlProps.redirectURL = redirectURL;
+	} else {
+		urlProps.redirectURL = window.location.origin;
+	}
+	const globalState: Record<string, string> = {
+		// @ts-ignore
+		...window['__authorizer__'],
+		...urlProps,
+	};
+
 	return (
 		<div
 			style={{
@@ -30,23 +53,15 @@ export default function App() {
 				/>
 				<h1>{globalState.organizationName}</h1>
 			</div>
-			<div
-				style={{
-					width: 400,
-					margin: `10px auto`,
-					border: `1px solid #D1D5DB`,
-					padding: `25px 20px`,
-					borderRadius: 5,
-				}}
-			>
+			<div className="container">
 				<BrowserRouter>
 					<AuthorizerProvider
 						config={{
 							authorizerURL: window.location.origin,
 							redirectURL: globalState.redirectURL,
 						}}
 					>
-						<Root />
+						<Root globalState={globalState} />
 					</AuthorizerProvider>
 				</BrowserRouter>
 			</div>

app/src/App.tsx

@@ -6,14 +6,30 @@ const ResetPassword = lazy(() => import('./pages/rest-password'));
 const Login = lazy(() => import('./pages/login'));
 const Dashboard = lazy(() => import('./pages/dashboard'));
 
-export default function Root() {
+export default function Root({
+	globalState,
+}: {
+	globalState: Record<string, string>;
+}) {
 	const { token, loading, config } = useAuthorizer();
 
 	useEffect(() => {
 		if (token) {
-			const url = new URL(config.redirectURL || '/app');
+			let redirectURL = config.redirectURL || '/app';
+			let params = `access_token=${token.access_token}&id_token=${token.id_token}&expires_in=${token.expires_in}&state=${globalState.state}`;
+			if (token.refresh_token) {
+				params += `&refresh_token=${token.refresh_token}`;
+			}
+			const url = new URL(redirectURL);
+			if (redirectURL.includes('?')) {
+				redirectURL = `${redirectURL}&${params}`;
+			} else {
+				redirectURL = `${redirectURL}?${params}`;
+			}
+
 			if (url.origin !== window.location.origin) {
-				window.location.href = config.redirectURL || '/app';
+				sessionStorage.removeItem('authorizer_state');
+				window.location.replace(redirectURL);
 			}
 		}
 		return () => {};

app/src/Root.tsx

@@ -1,5 +1,5 @@
 body {
-	margin: 0;
+	margin: 10;
 	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
 		'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
 		sans-serif;
@@ -14,3 +14,17 @@ body {
 *:after {
 	box-sizing: inherit;
 }
+
+.container {
+	box-sizing: content-box;
+	border: 1px solid #d1d5db;
+	padding: 25px 20px;
+	border-radius: 5px;
+}
+
+@media only screen and (min-width: 768px) {
+	.container {
+		width: 400px;
+		margin: 0 auto;
+	}
+}

app/src/index.css

@@ -0,0 +1,22 @@
+export const getCrypto = () => {
+	//ie 11.x uses msCrypto
+	return (window.crypto || (window as any).msCrypto) as Crypto;
+};
+
+export const createRandomString = () => {
+	const charset =
+		'0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz-_~.';
+	let random = '';
+	const randomValues = Array.from(
+		getCrypto().getRandomValues(new Uint8Array(43))
+	);
+	randomValues.forEach((v) => (random += charset[v % charset.length]));
+	return random;
+};
+
+export const createQueryParams = (params: any) => {
+	return Object.keys(params)
+		.filter((k) => typeof params[k] !== 'undefined')
+		.map((k) => encodeURIComponent(k) + '=' + encodeURIComponent(params[k]))
+		.join('&');
+};

app/src/utils/common.ts

@@ -29,10 +29,11 @@ import {
 } from 'react-icons/fi';
 import { IconType } from 'react-icons';
 import { ReactText } from 'react';
-import { useMutation } from 'urql';
+import { useMutation, useQuery } from 'urql';
 import { NavLink, useNavigate, useLocation } from 'react-router-dom';
 import { useAuthContext } from '../contexts/AuthContext';
 import { AdminLogout } from '../graphql/mutation';
+import { MetaQuery } from '../graphql/queries';
 
 interface LinkItemProps {
 	name: string;
@@ -51,6 +52,7 @@ interface SidebarProps extends BoxProps {
 
 export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 	const { pathname } = useLocation();
+	const [{ fetching, data }] = useQuery({ query: MetaQuery });
 	return (
 		<Box
 			transition="3s ease"
@@ -98,6 +100,19 @@ export const Sidebar = ({ onClose, ...rest }: SidebarProps) => {
 			>
 				<NavItem icon={FiCode}>API Playground</NavItem>
 			</Link>
+
+			{data?.meta?.version && (
+				<Text
+					color="gray.600"
+					fontSize="sm"
+					textAlign="center"
+					position="absolute"
+					bottom="5"
+					left="7"
+				>
+					Current Version: {data.meta.version}
+				</Text>
+			)}
 		</Box>
 	);
 };

dashboard/src/components/Menu.tsx

@@ -2,6 +2,7 @@ export const LOGO_URL =
 	'https://user-images.githubusercontent.com/6964334/147834043-fc384cab-e7ca-40f8-9663-38fc25fd5f3a.png';
 
 export const TextInputType = {
+	CLIENT_ID: 'CLIENT_ID',
 	GOOGLE_CLIENT_ID: 'GOOGLE_CLIENT_ID',
 	GITHUB_CLIENT_ID: 'GITHUB_CLIENT_ID',
 	FACEBOOK_CLIENT_ID: 'FACEBOOK_CLIENT_ID',
@@ -25,6 +26,7 @@ export const TextInputType = {
 };
 
 export const HiddenInputType = {
+	CLIENT_SECRET: 'CLIENT_SECRET',
 	GOOGLE_CLIENT_SECRET: 'GOOGLE_CLIENT_SECRET',
 	GITHUB_CLIENT_SECRET: 'GITHUB_CLIENT_SECRET',
 	FACEBOOK_CLIENT_SECRET: 'FACEBOOK_CLIENT_SECRET',

dashboard/src/constants.ts

@@ -1,3 +1,12 @@
+export const MetaQuery = `
+  query MetaQuery {
+    meta {
+      version
+      client_id
+    }
+  }
+`;
+
 export const AdminSessionQuery = `
   query {
     _admin_session{
@@ -9,6 +18,8 @@ export const AdminSessionQuery = `
 export const EnvVariablesQuery = `
   query {
     _env{
+      CLIENT_ID,
+      CLIENT_SECRET,
 	    GOOGLE_CLIENT_ID,
       GOOGLE_CLIENT_SECRET,
       GITHUB_CLIENT_ID,

dashboard/src/graphql/queries/index.ts

@@ -1,8 +1,10 @@
-import { Box, Center, Flex, Image, Text } from '@chakra-ui/react';
+import { Box, Flex, Image, Text, Spinner } from '@chakra-ui/react';
 import React from 'react';
-import { LOGO_URL } from '../constants';
+import { useQuery } from 'urql';
+import { MetaQuery } from '../graphql/queries';
 
 export function AuthLayout({ children }: { children: React.ReactNode }) {
+	const [{ fetching, data }] = useQuery({ query: MetaQuery });
 	return (
 		<Flex
 			flexWrap="wrap"
@@ -23,9 +25,18 @@ export function AuthLayout({ children }: { children: React.ReactNode }) {
 				</Text>
 			</Flex>
 
-			<Box p="6" m="5" rounded="5" bg="white" w="500px" shadow="xl">
-				{children}
-			</Box>
+			{fetching ? (
+				<Spinner />
+			) : (
+				<>
+					<Box p="6" m="5" rounded="5" bg="white" w="500px" shadow="xl">
+						{children}
+					</Box>
+					<Text color="gray.600" fontSize="sm">
+						Current Version: {data.meta.version}
+					</Text>
+				</>
+			)}
 		</Flex>
 	);
 }

dashboard/src/layouts/AuthLayout.tsx

@@ -6,7 +6,6 @@ import {
 	useToast,
 	VStack,
 	Text,
-	Divider,
 } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 import { useMutation } from 'urql';