Merge pull request #77 from supertokens/areeb/fix/refresh-bug-fix

feat: Handled the 401 response properly

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [unreleased]
 
+## [0.4.3] - 2023-03-06
+
+-   Fixes an issue where entering an incorrect API key would refresh the page
+
 ## [0.4.2] - 2023-02-27
 
 -   Removes logic where user's email and phone was obfuscated if the demo core connection uri was used

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "dashboard",
-	"version": "0.4.2",
+	"version": "0.4.3",
 	"private": true,
 	"dependencies": {
 		"@babel/core": "^7.16.0",

src/ui/components/auth/SignInWithApiKeyContent.tsx

@@ -24,6 +24,7 @@ const SignInWithApiKeyContent = (props: SignInWithApiKeyContentProps) => {
 					authorization: `Bearer ${apiKey}`,
 				},
 			},
+			shouldRedirectOnUnauthorised: false,
 		});
 
 		const body = await response.json();

src/utils/index.ts

@@ -55,13 +55,13 @@ interface IFetchDataArgs {
 	method: HttpMethod;
 	query?: { [key: string]: string };
 	config?: RequestInit;
-	shouldRedirect?: boolean;
+	shouldRedirectOnUnauthorised?: boolean;
 }
 
 export const useFetchData = () => {
 	const [statusCode, setStatusCode] = useState<number>(0);
 
-	const fetchData = async ({ url, method, query, config, shouldRedirect = true }: IFetchDataArgs) => {
+	const fetchData = async ({ url, method, query, config, shouldRedirectOnUnauthorised = true }: IFetchDataArgs) => {
 		const apiKeyInStorage = localStorageHandler.getItem(StorageKeys.AUTH_KEY);
 
 		let additionalHeaders: { [key: string]: string } = {};
@@ -85,7 +85,7 @@ export const useFetchData = () => {
 				},
 			},
 		});
-		const logoutAndRedirect = shouldRedirect && HTTPStatusCodes.UNAUTHORIZED === response.status;
+		const logoutAndRedirect = shouldRedirectOnUnauthorised && HTTPStatusCodes.UNAUTHORIZED === response.status;
 		if (logoutAndRedirect) {
 			window.localStorage.removeItem(StorageKeys.AUTH_KEY);
 			window.location.reload();
@@ -95,9 +95,10 @@ export const useFetchData = () => {
 		return response;
 	};
 
-	if (statusCode >= 300) throw Error(`Error: ${statusCode}. Some error Occurred`);
-
-	return fetchData;
+	if (statusCode < 300 || statusCode === HTTPStatusCodes.UNAUTHORIZED) {
+		return fetchData;
+	}
+	throw Error(`Error: ${statusCode}. Some error Occurred`);
 };
 
 // Language Utils

src/version.ts

@@ -13,4 +13,4 @@
  * under the License.
  */
 
-export const package_version = "0.4.2";
+export const package_version = "0.4.3";