--- /dev/null
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import './SSOButtons.scss';
+
+import { createTemporaryClient, getLoginFlows, startSsoLogin } from '../../../client/action/auth';
+
+function SSOButtons({ homeserver }) {
+ const [identityProviders, setIdentityProviders] = useState([]);
+
+ useEffect(() => {
+ // If the homeserver passed in is not a fully-qualified domain name, do not update.
+ if (!homeserver.match('(?=^.{4,253}$)(^((?!-)[a-zA-Z0-9-]{1,63}(?<!-).)+[a-zA-Z]{2,63}$)')) {
+ return;
+ }
+
+ // TODO Check that there is a Matrix server at homename before making requests.
+ // This will prevent the CORS errors that happen when a user changes their homeserver.
+ createTemporaryClient(homeserver).then((client) => {
+ const providers = [];
+ getLoginFlows(client).then((flows) => {
+ if (flows.flows !== undefined) {
+ const ssoFlows = flows.flows.filter((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas');
+ ssoFlows.forEach((flow) => {
+ if (flow.identity_providers !== undefined) {
+ const type = flow.type.substring(8);
+ flow.identity_providers.forEach((idp) => {
+ const imageSrc = client.mxcUrlToHttp(idp.icon);
+ providers.push({
+ homeserver, id: idp.id, name: idp.name, type, imageSrc,
+ });
+ });
+ }
+ });
+ }
+ setIdentityProviders(providers);
+ }).catch(() => {});
+ }).catch(() => {
+ setIdentityProviders([]);
+ });
+ }, [homeserver]);
+
+ // TODO Render all non-icon providers at the end so that they are never inbetween icons.
+ return (
+ <div className="sso-buttons">
+ {identityProviders.map((idp) => {
+ if (idp.imageSrc == null || idp.imageSrc === undefined || idp.imageSrc === '') {
+ return (
+ <button
+ key={idp.id}
+ type="button"
+ onClick={() => { startSsoLogin(homeserver, idp.type, idp.id); }}
+ className="sso-buttons__fallback-text text-b1"
+ >
+ {`Log in with ${idp.name}`}
+ </button>
+ );
+ }
+ return (
+ <SSOButton
+ key={idp.id}
+ homeserver={idp.homeserver}
+ id={idp.id}
+ name={idp.name}
+ type={idp.type}
+ imageSrc={idp.imageSrc}
+ />
+ );
+ })}
+ </div>
+ );
+}
+
+function SSOButton({
+ homeserver, id, name, type, imageSrc,
+}) {
+ function handleClick() {
+ startSsoLogin(homeserver, type, id);
+ }
+ return (
+ <button type="button" className="sso-button" onClick={handleClick}>
+ <img className="sso-button__img" src={imageSrc} alt={name} />
+ </button>
+ );
+}
+
+SSOButtons.propTypes = {
+ homeserver: PropTypes.string.isRequired,
+};
+
+SSOButton.propTypes = {
+ homeserver: PropTypes.string.isRequired,
+ id: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
+ type: PropTypes.string.isRequired,
+ imageSrc: PropTypes.string.isRequired,
+};
+
+export default SSOButtons;
--- /dev/null
+.sso-buttons {
+ margin-top: var(--sp-extra-loose);
+
+ display: flex;
+ justify-content: center;
+ flex-wrap: wrap;
+
+ &__fallback-text {
+ margin: var(--sp-tight) 0px;
+
+ flex-basis: 100%;
+ text-align: center;
+
+ color: var(--bg-primary);
+ cursor: pointer;
+ }
+}
+
+.sso-button {
+ margin-bottom: var(--sp-normal);
+
+ display: flex;
+ justify-content: center;
+ flex-basis: 20%;
+
+ cursor: pointer;
+
+ &__img {
+ height: var(--av-normal);
+ }
+}
\ No newline at end of file
import './Auth.scss';
import ReCAPTCHA from 'react-google-recaptcha';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
import * as auth from '../../../client/action/auth';
+import cons from '../../../client/state/cons';
import Text from '../../atoms/text/Text';
import Button from '../../atoms/button/Button';
import EyeIC from '../../../../public/res/ic/outlined/eye.svg';
import CinnySvg from '../../../../public/res/svg/cinny.svg';
+import SSOButtons from '../../molecules/sso-buttons/SSOButtons';
// This regex validates historical usernames, which don't satisfy today's username requirements.
// See https://matrix.org/docs/spec/appendices#id13 for more info.
function Auth({ type }) {
const [process, changeProcess] = useState(null);
+ const [homeserver, changeHomeserver] = useState('matrix.org');
+
const usernameRef = useRef(null);
const homeserverRef = useRef(null);
const passwordRef = useRef(null);
const confirmPasswordRef = useRef(null);
const emailRef = useRef(null);
+ const { search } = useLocation();
+ const searchParams = new URLSearchParams(search);
+ if (searchParams.has('loginToken')) {
+ const loginToken = searchParams.get('loginToken');
+ if (loginToken !== undefined) {
+ if (localStorage.getItem(cons.secretKey.BASE_URL) !== undefined) {
+ const baseUrl = localStorage.getItem(cons.secretKey.BASE_URL);
+ auth.loginWithToken(baseUrl, loginToken)
+ .then(() => {
+ window.location.replace('/');
+ })
+ .catch((error) => {
+ changeProcess(null);
+ if (!error.contains('CORS request rejected')) {
+ renderErrorMessage(error);
+ }
+ });
+ }
+ }
+ }
+
function register(recaptchaValue, terms, verified) {
auth.register(
usernameRef.current.value,
/>
<Input
forwardRef={homeserverRef}
+ onChange={(e) => changeHomeserver(e.target.value)}
id="auth_homeserver"
placeholder="Homeserver"
value="matrix.org"
{type === 'login' ? 'Login' : 'Register' }
</Button>
</div>
+ {type === 'login' && (
+ <SSOButtons homeserver={homeserver} />
+ )}
</form>
</div>
import cons from '../state/cons';
import { getBaseUrl } from '../../util/matrixUtil';
-async function login(username, homeserver, password) {
+// This method inspired by a similar one in matrix-react-sdk
+async function createTemporaryClient(homeserver) {
let baseUrl = null;
try {
baseUrl = await getBaseUrl(homeserver);
if (typeof baseUrl === 'undefined') throw new Error('Homeserver not found');
- const client = sdk.createClient({ baseUrl });
+ return sdk.createClient({ baseUrl });
+}
+
+async function getLoginFlows(client) {
+ const flows = await client.loginFlows();
+ if (flows !== undefined) {
+ return flows;
+ }
+ return null;
+}
+
+async function startSsoLogin(homeserver, type, idpId) {
+ const client = await createTemporaryClient(homeserver);
+ localStorage.setItem(cons.secretKey.BASE_URL, client.baseUrl);
+ window.location.href = client.getSsoLoginUrl(window.location.href, type, idpId);
+}
+
+async function login(username, homeserver, password) {
+ const client = await createTemporaryClient(homeserver);
const response = await client.login('m.login.password', {
identifier: {
localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token);
localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id);
localStorage.setItem(cons.secretKey.USER_ID, response.user_id);
- localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || baseUrl);
+ localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || client.baseUrl);
+}
+
+async function loginWithToken(baseUrl, token) {
+ const client = sdk.createClient(baseUrl);
+
+ const response = await client.login('m.login.token', {
+ token,
+ initial_device_display_name: cons.DEVICE_DISPLAY_NAME,
+ });
+
+ localStorage.setItem(cons.secretKey.ACCESS_TOKEN, response.access_token);
+ localStorage.setItem(cons.secretKey.DEVICE_ID, response.device_id);
+ localStorage.setItem(cons.secretKey.USER_ID, response.user_id);
+ localStorage.setItem(cons.secretKey.BASE_URL, response?.well_known?.['m.homeserver']?.base_url || client.baseUrl);
}
async function getAdditionalInfo(baseUrl, content) {
throw new Error(e);
}
}
+
async function verifyEmail(baseUrl, content) {
try {
const res = await fetch(`${baseUrl}/_matrix/client/r0/register/email/requestToken`, {
return {};
}
-export { login, register };
+export {
+ createTemporaryClient, getLoginFlows, login,
+ loginWithToken, register, startSsoLogin,
+};
projects / cinny.git / commitdiff