Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Client Side OAUTH with Token Refresh #82

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Client Side OAUTH with Token Refresh #82

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
284fa1e
oidc
jpsantosbh Mar 27, 2024
a052792
token refresh
jpsantosbh Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 35 additions & 36 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,18 @@ const FIREBASE_CONFIG = JSON.stringify({
vapidKey: process.env.FIREBASE_VAPID_KEY,
})

function getOAuthConfig(req) { return JSON.stringify({
authority: "cf-reference", // dummy authority
metadata: {
issuer: process.env.SIGNALWIRE_FABRIC_API_URL,
authorization_endpoint: process.env.OAUTH_AUTH_URI,
token_endpoint: process.env.OAUTH_TOKEN_URI,
},
client_id: process.env.OAUTH_CLIENT_ID,
redirect_uri: getCallbackUrl(req),
response_type: "code",
})}

const host = process.env.RELAY_HOST
const fabricApiUrl = process.env.SIGNALWIRE_FABRIC_API_URL

Expand Down Expand Up @@ -99,7 +111,7 @@ async function getSubscriberToken(reference, password) {
}

app.get('/', async (req, res) => {
let token
let token
let user
if (req.session && req.session.token) {
token = req.session.token
Expand All @@ -108,11 +120,12 @@ app.get('/', async (req, res) => {

res.render('index', {
host,
token: token,
token: token,
user: user,
fabricApiUrl: fabricApiUrl,
destination: process.env.DEFAULT_DESTINATION,
firebaseConfig: FIREBASE_CONFIG,
oauthConfig: getOAuthConfig(req)
})
})

Expand All @@ -131,46 +144,32 @@ app.get('/minimal', async (req, res) => {
})
})

app.get('/oauth', (req, res) => {
console.log('oauth: begin initiation')

const authEndpoint = process.env.OAUTH_AUTH_URI
const verifier = base64url(crypto.pseudoRandomBytes(32))
req.session.verifier = verifier
const challenge = base64url(
crypto.createHash('sha256').update(verifier).digest()
)
const currentHost = `${req.protocol}://${req.get('host')}`

const queryParams = new URLSearchParams({
response_type: 'code',
client_id: process.env.OAUTH_CLIENT_ID,
redirect_uri: getCallbackUrl(req),
code_challenge: challenge,
code_challenge_method: 'S256',
})

const authorizationUri = `${authEndpoint}?${queryParams}`

res.redirect(authorizationUri)
})

app.get('/callback', async (req, res) => {
console.log('oauth: process callback')
const callbackUrl = getCallbackUrl(req)

try {
const tokenData = await getAccessToken(req.query.code, req.session.verifier, callbackUrl)
const token = tokenData.access_token
req.session.token = token
res.render('index', {
host,
token: null,
user: null,
fabricApiUrl: fabricApiUrl,
destination: process.env.DEFAULT_DESTINATION,
firebaseConfig: FIREBASE_CONFIG,
oauthConfig: getOAuthConfig(req),
})
})

const userInfo = await getUserInfo(token)
req.session.user = userInfo
app.get('/userinfo', async (req, res) => {
const accessToken = req.headers['authorization'].split(' ')[1];


res.redirect('/')
} catch (error) {
console.error(error)
if(!accessToken || !accessToken.length) {
res.sendStatus(401)
}
req.session.token = accessToken
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the token is being accessed using oidc:

const _token = (await window.UserManager.getUser())?.access_token

We probably no longer need to maintain the session on our side.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If the token is being accessed using oidc:

const _token = (await window.UserManager.getUser())?.access_token

We probably no longer need to maintain the session on our side.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or do we? I am thinking... ..we need to check this.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we shouldn't

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we remove it then, please?

const userInfo = await getUserInfo(accessToken)
req.session.user = userInfo

res.json(userInfo)
})

app.get('/subscriber', (req, res) => {
Expand Down
76 changes: 73 additions & 3 deletions public/full.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,19 @@ const {
createMicrophoneAnalyzer,
} = SignalWire

const {
UserManager,
WebStorageStateStore
} = oidc

window.UserManager = new UserManager({..._oauth_config,
userStore: new WebStorageStateStore({ store: window.localStorage }),
})

window.signin = async () => {
await window.UserManager.signinRedirect()
}

const searchInput = document.getElementById('searchInput')
const searchType = document.getElementById('searchType')

Expand Down Expand Up @@ -362,6 +375,7 @@ function restoreUI() {
}

async function getClient() {
const _token = (await window.UserManager.getUser())?.access_token
if (!client && _token) {
client = await SWire({
host: !!_host && _host.trim().length ? _host : undefined,
Expand All @@ -370,6 +384,12 @@ async function getClient() {
logWsTraffic: true,
},
logLevel: 'debug',
maxConnectionStateTimeout: 9000,
onRefreshToken: async () => {
await window.UserManager.signinSilent()
const user = await window.UserManager.getUser()
return user?.access_token
}
})
}

Expand Down Expand Up @@ -399,6 +419,7 @@ window.connect = async () => {
}

try {
window._beforeDial = performance.now();
const call = await client.dial({
to: document.getElementById('destination').value,
logLevel: 'debug',
Expand All @@ -411,7 +432,9 @@ window.connect = async () => {
roomObj = call

roomObj.on('media.connected', () => {
window._afterMediaConnected = performance.now();
console.debug('>> media.connected')
console.debug(`⏱️⏱️⏱️ From dial() to media.connect: ${window._afterMediaConnected - window._beforeDial}ms ⏱️⏱️⏱️`)
})
roomObj.on('media.reconnecting', () => {
console.debug('>> media.reconnecting')
Expand All @@ -420,9 +443,17 @@ window.connect = async () => {
console.debug('>> media.disconnected')
})

roomObj.on('room.started', (params) =>
roomObj.on('room.started', (params) => {
console.debug('>> room.started', params)
)
window._afterRoomStared = performance.now()
console.debug(`⏱️⏱️⏱️ From dial() to room.started: ${window._afterRoomStared - window._beforeDial}ms ⏱️⏱️⏱️`)
})

roomObj.on('room.joined', (params) => {
console.debug('>> room.joined', params)
window._afterRoomJoined = performance.now()
console.debug(`⏱️⏱️⏱️ From dial() to room.joined: ${window._afterRoomJoined - window._beforeDial}ms ⏱️⏱️⏱️`)
})

roomObj.on('destroy', () => {
console.debug('>> destroy')
Expand Down Expand Up @@ -964,13 +995,52 @@ window.seekForwardPlayback = () => {
})
}

const updateUserInfoUI = async (accessToken) => {
if(!accessToken) return

const headers = {Authorization: `Bearer ${accessToken}`}
const user = await (await fetch('/userinfo', {headers})).json();
userInfo.innerHTML = `<div class="card-header">User Info</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">id: ${user.id}</li>
<li class="list-group-item">email: ${user.email}</li>
<li class="list-group-item">First Name: ${user.first_name}</li>
<li class="list-group-item">Last Name: ${user.last_name}</li>
<li class="list-group-item">Display Name: ${user.display_name}</li>
<li class="list-group-item">Job Title: ${user.job_title}</li>
<li class="list-group-item">Time Zone: ${user.time_zone}</li>
<li class="list-group-item">Ccountry: ${user.country}</li>
<li class="list-group-item">Region: ${user.region}</li>
<li class="list-group-item">Company Name: ${user.company_name}</li>
</ul>
</div>`
}

window.ready(async function () {
console.log('Ready!')
const searchParams = new URLSearchParams(location.search)
if (searchParams.has('code')) {
console.log('signinCallback!')
await window.UserManager.signinCallback()
} else {
try {
await window.UserManager.signinSilent()
} catch {}
}

const accessToken = (await window.UserManager.getUser())?.access_token

if(accessToken) {
await updateUserInfoUI(accessToken)

}

const client = await getClient()
if (client) {
await client.connect()
}
const searchParams = new URLSearchParams(location.search)

console.log('Handle inbound?', searchParams.has('inbound'))
if (searchParams.has('inbound')) {
await enablePushNotifications()
Expand Down
15 changes: 10 additions & 5 deletions views/index.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
<script type="text/javascript" src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>

<!-- OpenId Client for OAuth support -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/oidc-client-ts/3.0.1/browser/oidc-client-ts.min.js" integrity="sha512-dbp16seDDFaTwxhmIRipIY43lyMA70TDsc0zBODkVoM2LmD+UI8ndMbW8Qospq5+st97jIiaGCg2/vl0lBDBqQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<!-- To style up the demo a little -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
Expand All @@ -29,7 +32,7 @@
<a class="nav-link" href="/minimal">Minimal</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/oauth">Subscriber OAuth</a>
<a class="nav-link" href="#" onclick="signin()">Subscriber OAuth</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/subscriber">Subscriber Signin/Signup</a>
Expand All @@ -49,9 +52,9 @@
<div class="row py-3">
<!-- Connect options -->
<div class="col-12 col-md-4">
<% if (user) { %>
<div id="user-info" class="card">
<div class="card-header">User Info</div>
<div id="userInfo" class="card">
<% if (user) { %>
<div class="card-header">User Info</div>
<div class="card-body">
<ul class="list-group list-group-flush">
<li class="list-group-item">id: <%= user.id %></li>
Expand All @@ -66,8 +69,9 @@
<li class="list-group-item">Company Name: <%= user.company_name %></li>
</ul>
</div>
<% } %>

</div>
<% } %>

<div id="callConsole" class="card">
<div class="card-body">
Expand Down Expand Up @@ -531,6 +535,7 @@
const _host = "<%= host %>";
const _fabricApiUrl = "<%= fabricApiUrl %>";
const _firebaseConfig = <%- firebaseConfig %>;
const _oauth_config = <%- oauthConfig %>;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We are not using it anywhere on the client side, are we?

The same goes for _token?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We need to authConfig to initialize the oicd instance.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh yeah, I saw the _oauth_config usage. We need to remove only the _token.

</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://unpkg.com/@signalwire/js@dev"></script>
Expand Down