25c948d2a0
Verifying the auth token and obtaining user metadata involves some async HTTP requests in the background. If we remove the auth callback information from the window location too soon, then the UserManager will not complete the login process. This currently generally works because this process tends to complete before the /info and /tenant/info calls to Zuul. However, future changes to support a read-only authentication requirement will need to alter this sequence. This approach is more robust and easier to follow. Essentially the sequence is: * Return from IdP to /auth_callback * If /auth_callback is in our location, short-circuit normal rendering and render only the AuthCallbackPage * When background processing is complete, onSignIn will be called and we will set the user.redirect property in redux. * AuthCallbackPage has an effect callback on user.redirect which will cause it to perform the redirect away from auth_callback once signin is complete. This process leaves the AuthCallbackPage on the screen a little longer, so this change updates it to use the newer EmptyPage and Spinner elements that we have been using elsewhere, so if users see it, it appears more intentional. Change-Id: I206c020626c7fd73e58efc29dd50376203679721
183 lines
6.2 KiB
JavaScript
183 lines
6.2 KiB
JavaScript
// Copyright 2020 Red Hat, Inc
|
|
// Copyright 2021 Acme Gating, LLC
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License"); you may
|
|
// not use this file except in compliance with the License. You may obtain
|
|
// a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
|
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
|
// License for the specific language governing permissions and limitations
|
|
// under the License.
|
|
|
|
import * as React from 'react'
|
|
import PropTypes from 'prop-types'
|
|
import { connect } from 'react-redux'
|
|
|
|
import { AuthProvider } from 'oidc-react'
|
|
import { userLoggedIn, userLoggedOut } from './actions/user'
|
|
import { UserManager, User } from 'oidc-client'
|
|
import { getHomepageUrl } from './api'
|
|
import _ from 'lodash'
|
|
|
|
|
|
class ZuulAuthProvider extends React.Component {
|
|
/*
|
|
This wraps the oidc-react AuthProvider and supplies the necessary
|
|
information as props.
|
|
|
|
The oidc-react AuthProvider is not really meant to be reconstructed
|
|
frequently. Calling render multiple times (even if nothing actually
|
|
changes) during a login can cause multiple AuthProviders to be created
|
|
which can interfere with the login process.
|
|
|
|
We connect this class to state.auth.auth_params, so make sure that isn't
|
|
updated unless the OIDC parameters are actually changed.
|
|
|
|
If they are changed, then we will create a new AuthProvider with the
|
|
new parameters. Save those parameters in local storage so that when
|
|
we return from the IDP redirect, an AuthProvider with the same
|
|
configuration is created.
|
|
*/
|
|
static propTypes = {
|
|
auth_params: PropTypes.object,
|
|
channel: PropTypes.object,
|
|
election: PropTypes.object,
|
|
dispatch: PropTypes.func,
|
|
children: PropTypes.any,
|
|
}
|
|
|
|
render() {
|
|
const { auth_params, channel, election } = this.props
|
|
|
|
console.debug('ZuulAuthProvider rendering with params', auth_params)
|
|
|
|
const userManager = new UserManager({
|
|
...auth_params,
|
|
response_type: 'token id_token',
|
|
silent_redirect_uri: getHomepageUrl() + 'silent_callback',
|
|
redirect_uri: getHomepageUrl() + 'auth_callback',
|
|
includeIdTokenInSilentRenew: false,
|
|
})
|
|
|
|
const oidcConfig = {
|
|
onSignIn: async (user) => {
|
|
// Update redux with the logged in state and send the
|
|
// credentials to any other tabs.
|
|
const redirect = localStorage.getItem('zuul_auth_redirect')
|
|
this.props.dispatch(userLoggedIn(user, redirect))
|
|
this.props.channel.postMessage({
|
|
type: 'signIn',
|
|
auth_params: auth_params,
|
|
user: user
|
|
})
|
|
},
|
|
onSignOut: async () => {
|
|
// Update redux with the logged out state and send the
|
|
// credentials to any other tabs.
|
|
this.props.dispatch(userLoggedOut())
|
|
this.props.channel.postMessage({
|
|
type: 'signOut',
|
|
auth_params: auth_params
|
|
})
|
|
},
|
|
autoSignIn: false,
|
|
userManager: userManager,
|
|
}
|
|
|
|
// This is called whenever we receive a message from another tab
|
|
channel.onmessage = (msg) => {
|
|
console.debug('Received broadcast message', msg)
|
|
|
|
if (msg.type === 'signIn' && _.isEqual(msg.auth_params, auth_params)) {
|
|
const user = new User(msg.user)
|
|
userManager.getUser().then((olduser) => {
|
|
// In some cases, we can receive our own message, so make
|
|
// sure that the user info we received is different from
|
|
// what we already have.
|
|
let needToUpdate = true
|
|
if (olduser) {
|
|
if (user.toStorageString() === olduser.toStorageString()) {
|
|
needToUpdate = false
|
|
}
|
|
}
|
|
if (needToUpdate) {
|
|
console.debug('New token from other tab')
|
|
userManager.storeUser(user)
|
|
userManager.events.load(user)
|
|
this.props.dispatch(userLoggedIn(user))
|
|
}
|
|
})
|
|
}
|
|
else if (msg.type === 'signOut' && _.isEqual(msg.auth_params, auth_params)) {
|
|
userManager.removeUser()
|
|
this.props.dispatch(userLoggedOut())
|
|
}
|
|
else if (msg.type === 'init') {
|
|
// A new tab has been created; send our token in case it's helpful.
|
|
userManager.getUser().then((user) => {
|
|
if (user) {
|
|
console.debug('Sending token to new tab')
|
|
this.props.channel.postMessage({
|
|
type: 'signIn',
|
|
auth_params: auth_params,
|
|
user: user
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
// If we already have user data saved in session storage, we need to
|
|
// tell redux about it.
|
|
userManager.getUser().then((user) => {
|
|
if (user) {
|
|
console.debug('Restoring initial login from userManager')
|
|
this.props.dispatch(userLoggedIn(user))
|
|
} else {
|
|
// Maybe another tab is logged in. Ask them to send us tokens.
|
|
console.debug('Asking other tabs for auth tokens')
|
|
this.props.channel.postMessage({ type: 'init' })
|
|
}
|
|
})
|
|
|
|
// This is called about 1 minute before a token is expired. We will try
|
|
// to renew the token. We use a leader election so that only one tab
|
|
// makes the attempt; the others will receive the token via a broadcast
|
|
// event.
|
|
userManager.events.addAccessTokenExpiring(() => {
|
|
if (election.isLeader) {
|
|
console.debug('Token is expiring; renewing')
|
|
userManager.signinSilent().then(user => {
|
|
console.debug('Token renewal successful')
|
|
this.props.dispatch(userLoggedIn(user))
|
|
channel.postMessage({
|
|
type: 'signIn',
|
|
auth_params: auth_params,
|
|
user: user
|
|
})
|
|
}, err => {
|
|
console.error('Error renewing token:', err.message)
|
|
})
|
|
} else {
|
|
console.debug('Token is expiring; expecting leader to renew')
|
|
}
|
|
})
|
|
|
|
return (
|
|
<React.Fragment>
|
|
<AuthProvider {...oidcConfig} key={JSON.stringify(auth_params)}>
|
|
{this.props.children}
|
|
</AuthProvider>
|
|
</React.Fragment>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default connect(state => ({
|
|
auth_params: state.auth.auth_params,
|
|
}))(ZuulAuthProvider)
|