Skip to content

Commit c31d33b

Browse files
aChanEPdr-epepmkellyandyN42steve-r-west
authored
External auth integration (#67)
* split out logindialog * Include the error message in the login dialog * Able to create markup for the storefront * full login flow finished with hardcoding * redirect to the initial screen where the login was prompted * Able to keep state in a seperate place * Update requests * Change color on oidc buttons and fix up where the state is fetched * Changes to the LoginDialog * deal with loading states * get rid of unused imports * refactoring * Lots of clean up * Integrated @moltin/sdk types * update the styling to work with the latest * stretch the buttons in the form to the end * Able to grab a single authentication profile before redirecting * Able to fully login with the latest changes that have been made to the API * remove oidc login * local changes * changes to allow for reference store build * fixes to allow for build * More fixes to allow for a build * More changes to allow for a build * Updates made * remove the lcok file * new lock file * hax and remove social sharing button for now * build works locally * Change the redirect location when authenticating * remove all console.logs * use the same redirectUri * fix the redirecturi being incorrect * remove console.logs and remove comments * remove usage of query-string * add new line and uncomment out lines * get rid of typing error * remove comments and extraneous code * add the SDK to test netlify * Update the styles for the login button * Make fixes * add newline to end of file * fix bug and refactor a bit more * update the SDK * add generic color for oidc buttons * get rid of !important * Update the way we are setting the state during redirection and update the SDK * make function with more generic name * change name in utilities * [MT-1269] Update references to authenticationProfile to OidcProfile (#72) * [MT-1269] Update references to authenticationProfile to OidcProfile for the recent changes in the backend and the sdk * new sdk * Fixed yarn.lock integrity * [MT-4238] authorization endpoint is now a query parameter. (#71) * [MT-4238] authorization endpoint is now a query parameter. update oidc parameters to be valid for either case. * fix auth endpoint from profile url * add comment * use URL instead of strings * fix scope param in login redirect * OpenID Connect Proof Key Code Exchange (#74) * Add support for PKCE when retrieving Customers Token. * Add support for PKCE * Add support for PKCE when retrieving Customers Token. # Conflicts: # src/LoginDialog/OidcUtilities.ts * Add support for PKCE when retrieving Customers Token. # Conflicts: # src/LoginDialog/OidcUtilities.ts * Fixed: сustomers can't sign in using password OIDC profile exists (#76) * Updated yarn.lock js-sdk hashes * Packed js-sdk * Replaced sdk zip package with a beta dependency * Fixed multiple calls to /token api (#80) * Fixed issue where login dialog shows separator even when there are no oidc providers (#83) * Update service.ts (#87) * Updated js-sdk to 5.0.0 Co-authored-by: Dusan Radovanovic <dusan.radovanovic@elasticpath.com> Co-authored-by: Matthew Kelly <40244217+epmkelly@users.noreply.github.com> Co-authored-by: Andy Newman <andy0x2a@gmail.com> Co-authored-by: Matthew Kelly <matthew.kelly@elasticpath.com> Co-authored-by: Steve Ramage <49958178+steve-r-west@users.noreply.github.com> Co-authored-by: Rostyk <34774987+rostyk-kanafotskyy@users.noreply.github.com> Co-authored-by: dr-ep <drepgit@gmail.com> Co-authored-by: dushan <74645325+dr-ep@users.noreply.github.com> Co-authored-by: razkevich <razkevich8@gmail.com> Co-authored-by: Rostyk <rkanafotskyy@gmail.com>
1 parent 533512a commit c31d33b

19 files changed

+1358
-1662
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"version": "2.0.0",
44
"private": true,
55
"dependencies": {
6-
"@moltin/sdk": "^4.4.0",
6+
"@moltin/sdk": "^5.0.0",
77
"@types/node": "^12.0.0",
88
"@types/react": "^16.9.0",
99
"@types/react-dom": "^16.9.0",

‎src/AccountDropdown.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { Link, useHistory } from 'react-router-dom';
44
import useOnclickOutside from 'react-cool-onclickoutside';
55
import { useCustomerData, useTranslation } from './app-state';
66
import { createAccountUrl } from './routes';
7-
import { LoginDialog } from './LoginDialog';
7+
import { LoginDialog } from './LoginDialog/LoginDialog';
88
import { ReactComponent as AccountIcon } from './images/icons/ic_account.svg';
99

1010
import './AccountDropdown.scss';

‎src/LoginDialog.tsx‎

Lines changed: 0 additions & 128 deletions
This file was deleted.

src/LoginDialog.scss renamed to src/LoginDialog/LoginDialog.scss

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
@import './theme/common.scss';
2+
@import './../theme/common.scss';
33

44
.logindialog {
55
min-width: 500px;
@@ -51,8 +51,21 @@
5151
color: $mainErrorColor;
5252
}
5353

54-
.epbtn + .epbtn {
55-
margin-left: 10px;
54+
.registerbtn {
55+
width: 45%;
56+
}
57+
58+
.loginbtn {
59+
width: 45%;
60+
}
61+
}
62+
63+
.auth-opt {
64+
display: flex;
65+
flex-direction: column;
66+
67+
.authbtn {
68+
margin: 0 0 3% 0;
5669
}
5770
}
5871

‎src/LoginDialog/LoginDialog.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
2+
import React, { useState } from 'react';
3+
import Modal from 'react-responsive-modal';
4+
import { useTranslation, useCustomerAuthenticationSettings } from '../app-state';
5+
import { PasswordLoginForm } from './PasswordLoginForm';
6+
import { LoginDialogDivider } from './LoginDialogDivider';
7+
8+
import { ReactComponent as CloseIcon } from '../images/icons/ic_close.svg';
9+
10+
import './LoginDialog.scss';
11+
import { OidcLoginButtons } from './OidcLoginButtons';
12+
13+
interface AppModalLoginMainProps {
14+
handleModalClose: (...args: any[]) => any,
15+
openModal: boolean,
16+
}
17+
18+
export const LoginDialog: React.FC<AppModalLoginMainProps> = (props) => {
19+
const { handleModalClose, openModal } = props;
20+
21+
const { authenticationSettings, oidcProfiles } = useCustomerAuthenticationSettings()
22+
23+
const { t } = useTranslation();
24+
25+
const [isLoading, setIsLoading] = useState(false);
26+
const [failedLogin, setFailedLogin] = useState(false);
27+
28+
const passwordAuthAvailable: boolean =
29+
authenticationSettings?.data.allow_password_authentication !== undefined
30+
? authenticationSettings?.data.allow_password_authentication
31+
: true;
32+
33+
const handleClose = () => {
34+
setFailedLogin(false);
35+
handleModalClose();
36+
}
37+
38+
return (
39+
<Modal open={openModal} onClose={handleClose} classNames={{ modal: 'logindialog' }} showCloseIcon={false}>
40+
{
41+
(isLoading) ? <div className="epminiLoader --centered" /> : ('')
42+
}
43+
<div className={`logindialog__content ${isLoading ? '--loading' : ''}`}>
44+
<div className="logindialog__header">
45+
<h2 className="logindialog__title">
46+
{t('login')}
47+
</h2>
48+
<button type="button" aria-label="close" onClick={handleModalClose}>
49+
<CloseIcon />
50+
</button>
51+
</div>
52+
<div className="logindialog__body">
53+
<div className="logindialog__feedback">
54+
{failedLogin ? t('invalid-email-or-password') : ('')}
55+
</div>
56+
57+
{passwordAuthAvailable && (
58+
<PasswordLoginForm
59+
handleModalClose={handleModalClose}
60+
isLoading={isLoading}
61+
setIsLoading={setIsLoading}
62+
setFailedLogin={setFailedLogin}
63+
/>
64+
)}
65+
66+
{passwordAuthAvailable && oidcProfiles && oidcProfiles.data.length > 0 && (
67+
<LoginDialogDivider />
68+
)}
69+
70+
<OidcLoginButtons />
71+
</div>
72+
</div>
73+
</Modal>
74+
);
75+
};

‎src/LoginDialog/LoginDialogDivider.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
@import './../theme/common.scss';
2+
3+
.logindialogdivider {
4+
width: 100%;
5+
text-align: center;
6+
color: $secondComplimentTextColor;
7+
font-weight: bold;
8+
border-bottom: 1px solid $mainBorderColor;
9+
line-height: 0.1em;
10+
margin: 10px 0 20px;
11+
margin-top: 10%;
12+
margin-bottom: 10%;
13+
span {
14+
background:#fff;
15+
padding:0 10px;
16+
17+
}
18+
}

‎src/LoginDialog/LoginDialogDivider.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
2+
import React from 'react';
3+
import './LoginDialogDivider.scss';
4+
5+
export const LoginDialogDivider: React.FC = () => {
6+
return (
7+
<div className="logindialogdivider">
8+
<span>
9+
OR
10+
</span>
11+
</div>
12+
);
13+
};

‎src/LoginDialog/OidcHandler.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { useEffect } from 'react';
2+
import { useLocation, useHistory } from 'react-router-dom';
3+
import { oidcLogin } from '../service';
4+
import { useCustomerData } from '../app-state';
5+
import { generateRedirectUri } from './OidcUtilities'
6+
7+
export const OidcHandler: React.FC<any> = ()=> {
8+
9+
const history = useHistory();
10+
const historyPush = history.push;
11+
const location = useLocation();
12+
const locationSearch = location.search;
13+
const { setCustomerData } = useCustomerData();
14+
15+
useEffect(() => {
16+
async function setCustomerDataFromOidcCallback() {
17+
const redirectInitialLocation: string = localStorage.getItem('location') || '/';
18+
19+
let query = new URLSearchParams(locationSearch);
20+
const code = query.get('code')
21+
const state = query.get('state')
22+
const codeVerifier = localStorage.getItem('code_verifier');
23+
24+
if (code !== undefined && state !== undefined) {
25+
if (state === localStorage.getItem('state') && typeof codeVerifier === "string" ) {
26+
27+
const response: any = await oidcLogin(code!, generateRedirectUri(), codeVerifier)
28+
const result = response;
29+
setCustomerData(result.token, result.customer_id);
30+
31+
historyPush(redirectInitialLocation);
32+
} else {
33+
alert('Unable to validate identity');
34+
historyPush(redirectInitialLocation);
35+
}
36+
37+
localStorage.removeItem('location')
38+
localStorage.removeItem('state')
39+
}
40+
}
41+
42+
setCustomerDataFromOidcCallback();
43+
}, [historyPush, locationSearch, setCustomerData]);
44+
45+
return( <div className="epminiLoader --center" /> )
46+
}

‎src/LoginDialog/OidcLoginButtons.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import './../theme/common.scss';
2+
3+
.authbtn {
4+
position: relative;
5+
display: inline-block;
6+
text-align: center;
7+
font-size: 14px;
8+
border: 1px solid #FFFFFF;
9+
color: #ffffff;
10+
cursor: pointer;
11+
padding: 10px 15px;
12+
background-color: grey;
13+
}
14+
15+
.Keycloak {
16+
background-color:#1eb9e1
17+
}
18+
.Auth0 {
19+
background-color: #f95624
20+
}

0 commit comments

Comments
 (0)