fix: basic auth redirect

app/src/App.tsx

@@ -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={{
@@ -38,7 +61,7 @@ export default function App() {
 							redirectURL: globalState.redirectURL,
 						}}
 					>
-						<Root />
+						<Root globalState={globalState} />
 					</AuthorizerProvider>
 				</BrowserRouter>
 			</div>

app/src/Root.tsx

@@ -6,14 +6,20 @@ 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) {
-			console.log({ token });
 			let redirectURL = config.redirectURL || '/app';
-			const params = `access_token=${token.access_token}&id_token=${token.id_token}&expires_in=${token.expires_in}&refresh_token=${token.refresh_token}`;
+			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}`;

app/src/utils/common.ts

@@ -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('&');
+};