@canmingir/link 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/RouteManager/RouteManager.jsx

@@ -1,3 +1,5 @@
+import { Route, Routes } from "react-router-dom";
+
 import Callback from "../pages/Callback";
 import CompactLayout from "../layouts/CompactLayout";
 import ConfigError from "../pages/ConfigError";
@@ -9,8 +11,6 @@ import classicLoginLayout from "../layouts/auth/classic";
 import config from "../config/config";
 import modernLoginLayout from "../layouts/auth/modern";
 
-import { Route, Routes } from "react-router-dom";
-
 export default function RouteManager({ routes }) {
   const loginConfig = config().template?.login;
 
@@ -30,7 +30,6 @@ export default function RouteManager({ routes }) {
             >
               <Route index element={<LoginPage />} />
             </Route>
-            <Route path="/callback/:provider" element={<Callback />} />
             <Route path="/callback" element={<Callback />} />
           </>
         )}

package/src/pages/Callback.jsx

@@ -1,3 +1,5 @@
+import { useEffect, useRef } from "react";
+
 import Page from "../layouts/Page";
 import React from "react";
 import config from "../config/config";
@@ -6,9 +8,7 @@ import qs from "qs";
 import { storage } from "@nucleoidjs/webstorage";
 import { useContext } from "../ContextProvider/ContextProvider";
 import { useLocation } from "react-router-dom";
-
-import { useEffect, useRef } from "react";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate } from "react-router-dom";
 
 function Callback() {
   const { project: appConfig, name, appId } = config();
@@ -18,8 +18,6 @@ function Callback() {
   const [, dispatch] = useContext();
   const location = useLocation();
   const navigate = useNavigate();
-  const { provider } = useParams();
-
   const hasProcessed = useRef(false);
 
   useEffect(() => {
@@ -30,6 +28,14 @@ function Callback() {
     const parsedQuery = qs.parse(location.search, { ignoreQueryPrefix: true });
     const { code, error, error_description, state } = parsedQuery;
 
+    let provider;
+    let stateData = {};
+
+    if (state) {
+      stateData = JSON.parse(decodeURIComponent(state));
+      provider = stateData.provider;
+    }
+
     if (error) {
       console.error("OAuth error:", error, error_description);
       navigate(
@@ -89,7 +95,6 @@ function Callback() {
 
         storage.set(name, "accessToken", accessToken);
         storage.set(name, "refreshToken", refreshToken);
-        storage.set(name, "provider", provider);
 
         dispatch({ type: "LOGIN", payload: { user: userInfo } });
 

package/src/widgets/LoginForm/LoginForm.jsx

@@ -1,13 +1,20 @@
+import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
+import React, { useState } from "react";
+
 import NucleoidLoginForm from "../../components/NucleoidLoginForm";
 import SocialLoginButtons from "../../components/SocialLoginButtons";
 import Stack from "@mui/material/Stack";
 import config from "../../config/config";
 
-import { Box, Divider, Link as MuiLink, Typography } from "@mui/material";
-import React, { useState } from "react";
-
-const handleOAuthLogin = ({ redirectUri, authUrl, clientId, scope }) => {
-  window.location.href = `${authUrl}?client_id=${clientId}&scope=${scope}&response_type=code&redirect_uri=${redirectUri}`;
+const handleOAuthLogin = (
+  { redirectUri, authUrl, clientId, scope },
+  provider
+) => {
+  const state = JSON.stringify({
+    provider: provider,
+  });
+  const encodedState = encodeURIComponent(state);
+  window.location.href = `${authUrl}?client_id=${clientId}&scope=${scope}&response_type=code&redirect_uri=${redirectUri}&state=${encodedState}`;
 };
 
 function LoginForm() {
@@ -62,11 +69,11 @@ function LoginForm() {
       )}
       <SocialLoginButtons
         googleEnable={!!project.google}
-        onGoogle={() => handleOAuthLogin({ ...project.google })}
+        onGoogle={() => handleOAuthLogin({ ...project.google }, "google")}
         githubEnable={!!project.github}
-        onGithub={() => handleOAuthLogin({ ...project.github })}
+        onGithub={() => handleOAuthLogin({ ...project.github }, "github")}
         linkedinEnable={!!project.linkedin}
-        onLinkedin={() => handleOAuthLogin({ ...project.linkedin })}
+        onLinkedin={() => handleOAuthLogin({ ...project.linkedin }, "linkedin")}
       />
     </>
   );