Preview of SSO for browser

LICENSES.txt

@@ -5805,6 +5805,32 @@ ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEAL
 
 -----
 
+The following software may be included in this product: jwt-decode. A copy of the source code may be downloaded from git://github.com/auth0/jwt-decode. This software contains the following license and notice below:
+
+The MIT License (MIT)
+
+Copyright (c) 2015 Auth0, Inc. <support@auth0.com> (http://auth0.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+-----
+
 The following software may be included in this product: keyboard-key. A copy of the source code may be downloaded from git+ssh://github.com/levithomason/keyboard-key.git. This software contains the following license and notice below:
 
 MIT License

NOTICE.txt

@@ -1275,6 +1275,10 @@ Third-party licenses
 │  ├─ jws@4.0.0
 │  │  ├─ URL: git://github.com/brianloveswords/node-jws.git
 │  │  └─ VendorName: Brian J Brennan
+│  ├─ jwt-decode@3.1.2
+│  │  ├─ URL: git://github.com/auth0/jwt-decode
+│  │  ├─ VendorName: Jose F. Romaniello
+│  │  └─ VendorUrl: https://github.com/auth0/jwt-decode#readme
 │  ├─ keyboard-key@1.1.0
 │  │  ├─ URL: git+ssh://github.com/levithomason/keyboard-key.git
 │  │  └─ VendorName: Levi Thomason

package.json

@@ -181,6 +181,7 @@
     "isomorphic-fetch": "^2.2.1",
     "jsonic": "^0.3.0",
     "jszip": "^3.2.2",
+    "jwt-decode": "^3.1.2",
     "lodash-es": "^4.17.15",
     "memoize-one": "^5.2.1",
     "monaco-editor": "0.23.0",

src/browser/AppInit.tsx

@@ -53,6 +53,10 @@ import { shouldAllowOutgoingConnections } from 'shared/modules/dbMeta/dbMetaDuck
 import { getUuid } from 'shared/modules/udc/udcDuck'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
+import {
+  restoreSearchAndHashParams,
+  wasRedirectedBackFromSSOServer
+} from 'shared/modules/auth/common'
 
 // Configure localstorage sync
 applyKeys(
@@ -199,6 +203,14 @@ export function setupSentry(): void {
 // Introduce environment to be able to fork functionality
 const env = detectRuntimeEnv(window, NEO4J_CLOUD_DOMAINS)
 
+// SSO requires a redirect that removes our search parameters
+// To work around this they are stored in sessionStorage before
+// we redirect to the server, and then restore them when we get
+// redirected back
+if (wasRedirectedBackFromSSOServer()) {
+  restoreSearchAndHashParams()
+}
+
 // URL we're on
 const url = window.location.href
 

src/browser/modules/Stream/Auth/ConnectForm.tsx

@@ -28,12 +28,21 @@ import {
   StyledConnectionLabel,
   StyledConnectionFormEntry,
   StyledSegment,
-  StyledBoltUrlHintText
+  StyledBoltUrlHintText,
+  StyledFormContainer,
+  StyledSSOOptions,
+  StyledSSOButtonContainer,
+  StyledSSOError
 } from './styled'
 import { NATIVE, NO_AUTH } from 'services/bolt/boltHelpers'
 import { toKeyString } from 'services/utils'
 import { stripScheme, getScheme } from 'services/boltscheme.utils'
 import { AuthenticationMethod } from 'shared/modules/connections/connectionsDuck'
+import { authRequestForSSO } from 'shared/modules/auth/index.js'
+import { getSSOProvidersFromStorage } from 'shared/modules/auth/common.js'
+import { H3 } from 'browser-components/headers'
+import { StyledCypherErrorMessage } from '../styled'
+import { downloadAuthLogs } from 'shared/modules/auth/helpers'
 
 const readableauthenticationMethods: Record<AuthenticationMethod, string> = {
   [NATIVE]: 'Username / Password',
@@ -56,13 +65,19 @@ interface ConnectFormProps {
   username: string
   used: boolean
   supportsMultiDb: boolean
+  SSOError?: string
 }
 
 export default function ConnectForm(props: ConnectFormProps): JSX.Element {
   const [connecting, setConnecting] = useState(false)
   const [scheme, setScheme] = useState(
     props.allowedSchemes ? `${getScheme(props.host)}://` : ''
   )
+  const [SSOProviders, setSSOProviders] = useState<any[]>([])
+
+  useEffect(() => {
+    setSSOProviders(getSSOProvidersFromStorage())
+  }, [])
 
   useEffect(() => {
     if (props.allowedSchemes) {
@@ -116,118 +131,141 @@ export default function ConnectForm(props: ConnectFormProps): JSX.Element {
       }:// for a direct connection to a single instance.`
     : ''
 
+  const { SSOError } = props
+  const showSSO = SSOProviders.length > 0 || SSOError
   return (
-    <StyledConnectionForm onSubmit={onConnectClick}>
-      <StyledConnectionFormEntry>
-        <StyledConnectionLabel htmlFor="url-input" title={hoverText}>
-          Connect URL
-        </StyledConnectionLabel>
-        {schemeRestriction ? (
-          <>
-            <StyledSegment>
-              <StyledConnectionSelect
-                onChange={onSchemeChange}
-                value={scheme}
-                data-testid="bolt-scheme-select"
-              >
-                {props.allowedSchemes.map(s => {
-                  const schemeString = `${s}://`
-                  return (
-                    <option value={schemeString} key={toKeyString(s)}>
-                      {schemeString}
-                    </option>
-                  )
-                })}
-              </StyledConnectionSelect>
-              <StyledConnectionTextInput
-                onCopy={onCopyBoltUrl}
-                data-testid="boltaddress"
-                onChange={onHostChange}
-                value={stripScheme(props.host)}
-                id="url-input"
-              />
-            </StyledSegment>
-            <StyledBoltUrlHintText className="url-hint-text">
-              {hoverText}
-            </StyledBoltUrlHintText>
-          </>
-        ) : (
-          <StyledConnectionTextInput
-            data-testid="boltaddress"
-            onChange={onHostChange}
-            defaultValue={props.host}
-          />
-        )}
-      </StyledConnectionFormEntry>
-      {props.supportsMultiDb && (
-        <StyledConnectionFormEntry>
-          <StyledConnectionLabel>
-            Database - leave empty for default
-            <StyledConnectionTextInput
-              data-testid="database"
-              onChange={props.onDatabaseChange}
-              value={props.database}
-            />
-          </StyledConnectionLabel>
-        </StyledConnectionFormEntry>
+    <StyledFormContainer>
+      {showSSO && (
+        <StyledSSOOptions>
+          <H3>Single sign-on</H3>
+          {SSOProviders.map((provider: any) => (
+            <StyledSSOButtonContainer key={provider.id}>
+              <FormButton onClick={() => authRequestForSSO(provider.id)}>
+                {provider.name}
+              </FormButton>
+            </StyledSSOButtonContainer>
+          ))}
+          {SSOError && (
+            <StyledSSOError>
+              <StyledCypherErrorMessage>ERROR</StyledCypherErrorMessage>
+              <div>{SSOError}</div>
+              <button onClick={downloadAuthLogs}> download logs </button>
+            </StyledSSOError>
+          )}
+        </StyledSSOOptions>
       )}
-
-      {props.allowedAuthMethods.length > 1 && (
+      <StyledConnectionForm onSubmit={onConnectClick}>
         <StyledConnectionFormEntry>
-          <StyledConnectionLabel>
-            Authentication type
-            <StyledConnectionSelect
-              data-testid="authenticationMethod"
-              onChange={props.onAuthenticationMethodChange}
-              value={props.authenticationMethod}
-            >
-              {props.allowedAuthMethods.map(auth => (
-                <option value={auth} key={auth}>
-                  {readableauthenticationMethods[auth]}
-                </option>
-              ))}
-            </StyledConnectionSelect>
+          <StyledConnectionLabel htmlFor="url-input" title={hoverText}>
+            Connect URL
           </StyledConnectionLabel>
-        </StyledConnectionFormEntry>
-      )}
-
-      {props.authenticationMethod === NATIVE && (
-        <StyledConnectionFormEntry>
-          <StyledConnectionLabel>
-            Username
+          {schemeRestriction ? (
+            <>
+              <StyledSegment>
+                <StyledConnectionSelect
+                  onChange={onSchemeChange}
+                  value={scheme}
+                  data-testid="bolt-scheme-select"
+                >
+                  {props.allowedSchemes.map(s => {
+                    const schemeString = `${s}://`
+                    return (
+                      <option value={schemeString} key={toKeyString(s)}>
+                        {schemeString}
+                      </option>
+                    )
+                  })}
+                </StyledConnectionSelect>
+                <StyledConnectionTextInput
+                  onCopy={onCopyBoltUrl}
+                  data-testid="boltaddress"
+                  onChange={onHostChange}
+                  value={stripScheme(props.host)}
+                  id="url-input"
+                />
+              </StyledSegment>
+              <StyledBoltUrlHintText className="url-hint-text">
+                {hoverText}
+              </StyledBoltUrlHintText>
+            </>
+          ) : (
             <StyledConnectionTextInput
-              data-testid="username"
-              onChange={props.onUsernameChange}
-              defaultValue={props.username}
+              data-testid="boltaddress"
+              onChange={onHostChange}
+              defaultValue={props.host}
             />
-          </StyledConnectionLabel>
+          )}
         </StyledConnectionFormEntry>
-      )}
+        {props.supportsMultiDb && (
+          <StyledConnectionFormEntry>
+            <StyledConnectionLabel>
+              Database - leave empty for default
+              <StyledConnectionTextInput
+                data-testid="database"
+                onChange={props.onDatabaseChange}
+                value={props.database}
+              />
+            </StyledConnectionLabel>
+          </StyledConnectionFormEntry>
+        )}
 
-      {props.authenticationMethod === NATIVE && (
-        <StyledConnectionFormEntry>
-          <StyledConnectionLabel>
-            Password
-            <StyledConnectionTextInput
-              data-testid="password"
-              onChange={props.onPasswordChange}
-              defaultValue={props.password}
-              type="password"
-            />
-          </StyledConnectionLabel>
-        </StyledConnectionFormEntry>
-      )}
+        {props.allowedAuthMethods.length > 1 && (
+          <StyledConnectionFormEntry>
+            <StyledConnectionLabel>
+              Authentication type
+              <StyledConnectionSelect
+                data-testid="authenticationMethod"
+                onChange={props.onAuthenticationMethodChange}
+                value={props.authenticationMethod}
+              >
+                {props.allowedAuthMethods.map(auth => (
+                  <option value={auth} key={auth}>
+                    {readableauthenticationMethods[auth]}
+                  </option>
+                ))}
+              </StyledConnectionSelect>
+            </StyledConnectionLabel>
+          </StyledConnectionFormEntry>
+        )}
+
+        {props.authenticationMethod === NATIVE && (
+          <StyledConnectionFormEntry>
+            <StyledConnectionLabel>
+              Username
+              <StyledConnectionTextInput
+                data-testid="username"
+                onChange={props.onUsernameChange}
+                defaultValue={props.username}
+              />
+            </StyledConnectionLabel>
+          </StyledConnectionFormEntry>
+        )}
+
+        {props.authenticationMethod === NATIVE && (
+          <StyledConnectionFormEntry>
+            <StyledConnectionLabel>
+              Password
+              <StyledConnectionTextInput
+                data-testid="password"
+                onChange={props.onPasswordChange}
+                defaultValue={props.password}
+                type="password"
+              />
+            </StyledConnectionLabel>
+          </StyledConnectionFormEntry>
+        )}
 
-      <Render if={!connecting}>
-        <FormButton
-          data-testid="connect"
-          type="submit"
-          style={{ marginRight: 0 }}
-        >
-          Connect
-        </FormButton>
-      </Render>
-      <Render if={connecting}>Connecting...</Render>
-    </StyledConnectionForm>
+        <Render if={!connecting}>
+          <FormButton
+            data-testid="connect"
+            type="submit"
+            style={{ marginRight: 0 }}
+          >
+            Connect
+          </FormButton>
+        </Render>
+        <Render if={connecting}>Connecting...</Render>
+      </StyledConnectionForm>
+    </StyledFormContainer>
   )
 }

src/browser/modules/Stream/Auth/ConnectionForm.tsx

@@ -345,6 +345,7 @@ export class ConnectionForm extends Component<any, ConnectionFormState> {
             this
           )}
           host={host}
+          SSOError={this.state.SSOError}
           username={this.state.username}
           password={this.state.password}
           database={this.state.requestedUseDb}