From b6e3690071399625f283190cb8b10ca956f1292f Mon Sep 17 00:00:00 2001 From: Ranjith Muniyappa Date: Sat, 4 Nov 2023 23:51:16 +0530 Subject: [PATCH 1/6] remove default react code, remove strict mode --- src/App.js | 26 +++++--------------------- src/index.js | 2 -- 2 files changed, 5 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index 3784575..3675859 100644 --- a/src/App.js +++ b/src/App.js @@ -1,25 +1,9 @@ -import logo from './logo.svg'; -import './App.css'; +import './App.css' + function App() { - return ( -
-
- logo -

- Edit src/App.js and save to reload. -

- - Learn React - -
-
- ); + return
+
} -export default App; +export default App diff --git a/src/index.js b/src/index.js index d563c0f..26a2c71 100644 --- a/src/index.js +++ b/src/index.js @@ -6,9 +6,7 @@ import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( - - ); // If you want to start measuring performance in your app, pass a function From 38646bb9b781cece980873786c85652a018c3128 Mon Sep 17 00:00:00 2001 From: Ranjith Muniyappa Date: Mon, 6 Nov 2023 11:00:22 +0530 Subject: [PATCH 2/6] working condition -- fe an be | jwt only --- src/App.js | 10 ++++- src/components/LoginForm.js | 78 +++++++++++++++++++++++++++++++++ src/components/PrivateHello.js | 42 ++++++++++++++++++ src/components/PublicHello.js | 30 +++++++++++++ src/components/SamlLoginForm.js | 30 +++++++++++++ 5 files changed, 189 insertions(+), 1 deletion(-) create mode 100644 src/components/LoginForm.js create mode 100644 src/components/PrivateHello.js create mode 100644 src/components/PublicHello.js create mode 100644 src/components/SamlLoginForm.js diff --git a/src/App.js b/src/App.js index 3675859..751c3fc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,17 @@ import './App.css' +import LoginForm from './components/LoginForm' +import PublicHello from './components/PublicHello' +import PrivateHello from './components/PrivateHello' +import SAMLLoginForm from './components/SamlLoginForm' function App() { return
+ + + +
} -export default App +export default App; diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js new file mode 100644 index 0000000..7e5405b --- /dev/null +++ b/src/components/LoginForm.js @@ -0,0 +1,78 @@ +import React, { useState } from 'react'; + +const LoginForm = () => { + const [username, setUsername] = useState(''); + const [password, setPassword] = useState(''); + const [token, setToken] = useState(''); + + const handleUsernameChange = (event) => { + setUsername(event.target.value); + }; + + const handlePasswordChange = (event) => { + setPassword(event.target.value); + }; + + const handleSubmit = async (event) => { + event.preventDefault(); + + const requestOptions = { + method: 'POST', + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + username: username, + password: password + }) + }; + + try { + const response = await fetch('http://localhost:8080/login/token', requestOptions); + const data = await response.json(); + if (data.jwt) { + setToken(data.jwt); + sessionStorage.setItem('token', data.jwt); + console.log('JWT token:', data.jwt); + // You might want to store this token in local storage or state management (Redux, Context API) for further use. + } else { + console.error('Authentication failed'); + } + } catch (error) { + console.error('Error occurred:', error); + } + + // Reset the form fields + setUsername(''); + setPassword(''); + }; + + return ( +
+

Login

+
+
+ + +
+
+ + +
+ +
+
+ ); +}; + +export default LoginForm; diff --git a/src/components/PrivateHello.js b/src/components/PrivateHello.js new file mode 100644 index 0000000..fc611cb --- /dev/null +++ b/src/components/PrivateHello.js @@ -0,0 +1,42 @@ +// PrivateHello.js +import React, { useState } from 'react'; + +const PrivateHello = () => { + const [response, setResponse] = useState(''); + + const fetchPrivateData = async () => { + const token = sessionStorage.getItem('token'); + if (token) { + try { + const result = await fetch('http://localhost:8080/private/hello', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${token}` + }, + }); + + if (result.ok) { + const data = await result.text(); + setResponse(data); + } else { + console.error('Error fetching private data'); + } + } catch (error) { + console.error('Error occurred:', error); + } + } else { + console.log('Token not found'); + } + }; + + return ( +
+

Private Hello

+ +

{response}

+
+ ); +}; + +export default PrivateHello; diff --git a/src/components/PublicHello.js b/src/components/PublicHello.js new file mode 100644 index 0000000..c55b4ae --- /dev/null +++ b/src/components/PublicHello.js @@ -0,0 +1,30 @@ +// PublicHello.js +import React, { useState } from 'react'; + +const PublicHello = () => { + const [response, setResponse] = useState(''); + + const fetchPublicData = async () => { + try { + const result = await fetch('http://localhost:8080/public/hello'); + if (result.ok) { + const data = await result.text(); + setResponse(data); + } else { + console.error('Error fetching public data'); + } + } catch (error) { + console.error('Error occurred:', error); + } + }; + + return ( +
+

Public Hello

+ +

{response}

+
+ ); +}; + +export default PublicHello; diff --git a/src/components/SamlLoginForm.js b/src/components/SamlLoginForm.js new file mode 100644 index 0000000..d88ad48 --- /dev/null +++ b/src/components/SamlLoginForm.js @@ -0,0 +1,30 @@ +import React from 'react'; + +const SAMLLoginForm = () => { + const handleSAMLLogin = async () => { + try { + const response = await fetch('http://localhost:8080/saml2/authenticate/okta', { + method: 'GET', + headers: { + 'Content-Type': 'application/json', + // Include any necessary authentication headers or credentials + }, + }); + const data = await response.json(); + // Handle the SAML token response as required + console.log('SAML Token:', data); + // Possibly store the SAML token for further use + } catch (error) { + console.error('Error occurred during SAML login:', error); + } + }; + + return ( +
+

SAML Login

+ +
+ ); +}; + +export default SAMLLoginForm; From 5c7a527d97e41f26dfdd6dbee29fb9d695b8f27c Mon Sep 17 00:00:00 2001 From: Ranjith Muniyappa Date: Mon, 6 Nov 2023 16:45:44 +0530 Subject: [PATCH 3/6] working model - fe and be | jwt and saml --- src/components/PrivateHello.js | 15 +++++++++- src/components/SamlLoginForm.js | 52 +++++++++++++++++++++++---------- 2 files changed, 51 insertions(+), 16 deletions(-) diff --git a/src/components/PrivateHello.js b/src/components/PrivateHello.js index fc611cb..505af5a 100644 --- a/src/components/PrivateHello.js +++ b/src/components/PrivateHello.js @@ -3,6 +3,14 @@ import React, { useState } from 'react'; const PrivateHello = () => { const [response, setResponse] = useState(''); + console.log(location.search); + const params = new URLSearchParams(location.search); + + // You can access specific parameters: + console.log(params.get('token')) + console.log(params.get('a')) + + sessionStorage.setItem('token', params.get('token')); const fetchPrivateData = async () => { const token = sessionStorage.getItem('token'); @@ -12,7 +20,12 @@ const PrivateHello = () => { method: 'GET', headers: { 'Content-Type': 'application/json', - 'Authorization': `Bearer ${token}` + 'Authorization': `Bearer ${token}`, + // 'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token', + // 'Access-Control-Allow-Methods': 'OPTIONS,GET,PUT,DELETE,POST', + // 'Access-Control-Allow-Credentials': true, + // 'Access-Control-Allow-Origin': '*', + // 'X-Requested-With': '*', }, }); diff --git a/src/components/SamlLoginForm.js b/src/components/SamlLoginForm.js index d88ad48..055e904 100644 --- a/src/components/SamlLoginForm.js +++ b/src/components/SamlLoginForm.js @@ -2,21 +2,43 @@ import React from 'react'; const SAMLLoginForm = () => { const handleSAMLLogin = async () => { - try { - const response = await fetch('http://localhost:8080/saml2/authenticate/okta', { - method: 'GET', - headers: { - 'Content-Type': 'application/json', - // Include any necessary authentication headers or credentials - }, - }); - const data = await response.json(); - // Handle the SAML token response as required - console.log('SAML Token:', data); - // Possibly store the SAML token for further use - } catch (error) { - console.error('Error occurred during SAML login:', error); - } + window.open('http://localhost:8080/saml2/authenticate/okta', '_blank'); + // try { + // const response = await fetch('http://localhost:8080/saml2/authenticate/okta', { + // method: 'GET', + // headers: { + // 'Content-Type': 'application/json', + // // Include any necessary authentication headers or credentials + // }, + // }); + // const htmlResponse = await response.text(); + + // // Extract the SAMLRequest value from the HTML response + // const parser = new DOMParser(); + // const doc = parser.parseFromString(htmlResponse, 'text/html'); + // const samlRequest = doc.querySelector('input[name="SAMLRequest"]').value; + + // // Create a form dynamically + // const form = document.createElement('form'); + // form.method = 'POST'; + // form.action = 'https://dev-21824939.okta.com/app/dev-21824939_localsimpleapp_1/exkcpw27nlbsux0BB5d7/sso/saml'; + // const input = document.createElement('input'); + // input.type = 'hidden'; + // input.name = 'SAMLRequest'; + // input.value = samlRequest; + // form.appendChild(input); + + // // Hide the form + // form.style.display = 'none'; + + // // Append form to the body + // document.body.appendChild(form); + + // // Submit the form on button click + // form.submit(); + // } catch (error) { + // console.error('Error occurred during SAML login:', error); + // } }; return ( From 976da447b6021d40d5e610582cb70bff5d77c8d0 Mon Sep 17 00:00:00 2001 From: Ranjith Muniyappa Date: Mon, 6 Nov 2023 16:50:27 +0530 Subject: [PATCH 4/6] fix location keyword warning --- src/components/PrivateHello.js | 16 +++++---------- src/components/SamlLoginForm.js | 36 --------------------------------- 2 files changed, 5 insertions(+), 47 deletions(-) diff --git a/src/components/PrivateHello.js b/src/components/PrivateHello.js index 505af5a..afb3541 100644 --- a/src/components/PrivateHello.js +++ b/src/components/PrivateHello.js @@ -3,14 +3,13 @@ import React, { useState } from 'react'; const PrivateHello = () => { const [response, setResponse] = useState(''); - console.log(location.search); - const params = new URLSearchParams(location.search); - // You can access specific parameters: - console.log(params.get('token')) - console.log(params.get('a')) + const urlParams = new URLSearchParams(window.location.search); + const token = urlParams.get('token'); - sessionStorage.setItem('token', params.get('token')); + if (token) { + sessionStorage.setItem('token', token); + } const fetchPrivateData = async () => { const token = sessionStorage.getItem('token'); @@ -21,11 +20,6 @@ const PrivateHello = () => { headers: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}`, - // 'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token', - // 'Access-Control-Allow-Methods': 'OPTIONS,GET,PUT,DELETE,POST', - // 'Access-Control-Allow-Credentials': true, - // 'Access-Control-Allow-Origin': '*', - // 'X-Requested-With': '*', }, }); diff --git a/src/components/SamlLoginForm.js b/src/components/SamlLoginForm.js index 055e904..a9d9313 100644 --- a/src/components/SamlLoginForm.js +++ b/src/components/SamlLoginForm.js @@ -3,42 +3,6 @@ import React from 'react'; const SAMLLoginForm = () => { const handleSAMLLogin = async () => { window.open('http://localhost:8080/saml2/authenticate/okta', '_blank'); - // try { - // const response = await fetch('http://localhost:8080/saml2/authenticate/okta', { - // method: 'GET', - // headers: { - // 'Content-Type': 'application/json', - // // Include any necessary authentication headers or credentials - // }, - // }); - // const htmlResponse = await response.text(); - - // // Extract the SAMLRequest value from the HTML response - // const parser = new DOMParser(); - // const doc = parser.parseFromString(htmlResponse, 'text/html'); - // const samlRequest = doc.querySelector('input[name="SAMLRequest"]').value; - - // // Create a form dynamically - // const form = document.createElement('form'); - // form.method = 'POST'; - // form.action = 'https://dev-21824939.okta.com/app/dev-21824939_localsimpleapp_1/exkcpw27nlbsux0BB5d7/sso/saml'; - // const input = document.createElement('input'); - // input.type = 'hidden'; - // input.name = 'SAMLRequest'; - // input.value = samlRequest; - // form.appendChild(input); - - // // Hide the form - // form.style.display = 'none'; - - // // Append form to the body - // document.body.appendChild(form); - - // // Submit the form on button click - // form.submit(); - // } catch (error) { - // console.error('Error occurred during SAML login:', error); - // } }; return ( From 548c2dd95da4821bf354b9d248de4bfc6e2f8b88 Mon Sep 17 00:00:00 2001 From: Ranjith Muniyappa Date: Mon, 6 Nov 2023 18:26:28 +0530 Subject: [PATCH 5/6] add Logout Page, + informational login message --- src/App.js | 3 ++- src/components/LoginForm.js | 6 ++++++ src/components/LogoutPage.js | 37 ++++++++++++++++++++++++++++++++++++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 src/components/LogoutPage.js diff --git a/src/App.js b/src/App.js index 751c3fc..a8bc1f5 100644 --- a/src/App.js +++ b/src/App.js @@ -3,12 +3,13 @@ import LoginForm from './components/LoginForm' import PublicHello from './components/PublicHello' import PrivateHello from './components/PrivateHello' import SAMLLoginForm from './components/SamlLoginForm' - +import LogoutPage from './components/LogoutPage' function App() { return
+
diff --git a/src/components/LoginForm.js b/src/components/LoginForm.js index 7e5405b..763e38c 100644 --- a/src/components/LoginForm.js +++ b/src/components/LoginForm.js @@ -3,7 +3,9 @@ import React, { useState } from 'react'; const LoginForm = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); + // eslint-disable-next-line const [token, setToken] = useState(''); + const [loginSuccess, setLoginSuccess] = useState(false); const handleUsernameChange = (event) => { setUsername(event.target.value); @@ -34,6 +36,8 @@ const LoginForm = () => { setToken(data.jwt); sessionStorage.setItem('token', data.jwt); console.log('JWT token:', data.jwt); + // Set login success state to true + setLoginSuccess(true); // You might want to store this token in local storage or state management (Redux, Context API) for further use. } else { console.error('Authentication failed'); @@ -71,6 +75,8 @@ const LoginForm = () => { + + {loginSuccess &&

Login successful!

} ); }; diff --git a/src/components/LogoutPage.js b/src/components/LogoutPage.js new file mode 100644 index 0000000..68eb573 --- /dev/null +++ b/src/components/LogoutPage.js @@ -0,0 +1,37 @@ +import React, { useState } from 'react'; + +const LogoutPage = () => { + const [message, setMessage] = useState(''); + + const handleLogout = async () => { + try { + const response = await fetch('http://localhost:8080/saml-logout', { + method: 'GET', + credentials: 'include' + }); + + if (response.ok) { + const data = await response.text(); + setMessage(data); + sessionStorage.clear(); + // Redirect to http://localhost:3000 after successful logout with a query parameter + window.location.href = 'http://localhost:3000?logout=true&session=cleared'; + } else { + setMessage('Error logging out'); + } + } catch (error) { + setMessage('Error occurred during logout'); + console.error(error); + } + }; + + return ( +
+

Logout Page

+ +

{message}

+
+ ); +}; + +export default LogoutPage; From e3fc6f289cec66b8f3a58f19800c76dcf9fb68f0 Mon Sep 17 00:00:00 2001 From: Ranjith Muniyappa Date: Mon, 6 Nov 2023 18:29:46 +0530 Subject: [PATCH 6/6] dummy commit --- src/components/LogoutPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LogoutPage.js b/src/components/LogoutPage.js index 68eb573..7f237e2 100644 --- a/src/components/LogoutPage.js +++ b/src/components/LogoutPage.js @@ -17,7 +17,7 @@ const LogoutPage = () => { // Redirect to http://localhost:3000 after successful logout with a query parameter window.location.href = 'http://localhost:3000?logout=true&session=cleared'; } else { - setMessage('Error logging out'); + setMessage('Error logging out -- Simple'); } } catch (error) { setMessage('Error occurred during logout');