Summary:
I am creating a Vs Code web extension with OAuth2 based authentication (similar to Github Authentication in VS Code), upon successful authentication, redirects to a specific URI like the one shown below. This URI, unfortunately, contains the auth credentials in the fragment part (i.e. starts with the "#" character). This "#" character and the credentials are added by the OAuth server.
Redirect URI from OAuth server:
https://vscode.dev/callback?vscode-reqid=1&vscode-scheme=vscode&vscode-authority=myPublisher.foo-web-extension&vscode-path=%2Fdid-authenticate#&access_token=XXXX&expires_in=XXXX&location=XXXX&api_domain=XXXX
I'm accessing this URI inside the extension's source using the below code:
context.subscriptions.push(vscode.window.registerUriHandler({
handleUri(uri: vscode.Uri): vscode.ProviderResult<void> {
console.log(uri);
}
}));
// output: { "$mid": 1, "path": "/did-authenticate", "scheme": "vscode", "authority": "myPublisher.foo-web-extension" }
Note here that the 'fragment' part of the vscode.Uri instance is not present in the output
The URI object doesn't contain the fragment part (i.e. #&access_token=XXXX&expires_in=XXXX&location=XXXX&api_domain=XXXX) which is required to log the user in the extension.
Questions:
I can't log the user in until I can access the OAuth credentials from this URI. Is there any way the handler function can get access to the fragment part of the URI? Any workaround?
I'm using vscode.env.openExternal to initiate the login process, which opens a new tab. Is there another option to open the same process in a popup window using VS Code's Extension API? Github Authentication uses a popup window for the same. I wasn't able to find the particular VS Code's Extension API.
What I've tried?
- Removing the '#' part from the URI solves the issue as all the credential information gets included in the
uri.queryobject. So, I've reached out to the OAuth provider for removing the "#" character and providing credentials in queryString only, but haven't got a solution from them as of now.
Steps to Reproduce:
Reproducing error during VS Code web extension development
- Create a URI for the VS Code's extension to listen for using the below code.
const redirectURI = (await vscode.env.asExternalUri(vscode.Uri.parse(vscode.env.uriScheme + '://myPublisher.foo-web-extension/did-authenticate'))).toString()
- Attach this redirectURI to OAuth2 login URI for your provider and open the resultant loginURI using the vscode.env.openExternal method and perform authentication. The OAuth2 authentication provider I'm using redirects to a link containing credential details appended as fragment part.
i.e.https://vscode.dev/callback?vscode-reqid=1&vscode-scheme=vscode&vscode-authority=myPublisher.foo-web-extension&vscode-path=%2Fdid-authenticate#&access_token=XXXX&expires_in=XXXX&location=XXXX&api_domain=XXXX
const loginUri = await getLoginUri(redirectURI);
await vscode.env.openExternal(loginUri);
- Listen for the URI event and register a URI handler method to get and save auth credentials.
context.subscriptions.push(vscode.window.registerUriHandler({
handleUri(uri: vscode.Uri): vscode.ProviderResult<void> {
console.log(uri);
}
}));
// output: { "$mid": 1, "path": "/did-authenticate", "scheme": "vscode", "authority": "myPublisher.foo-web-extension" }
- As the credential details are present in the fragment part of the redirect URI, the resultant 'uri' I'm getting is having no credential details. We can get access to the credentials details only if we can get access to the fragment part of this 'uri'.
VS Code Web - version information
Version: 1.63.2
Commit: 899d46d82c4c95423fb7e10e68eba52050e30ba3
User Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.99 Safari/537.36
Embedder: vscode.dev