Custom Teams Office 365 Connector cannot be setup - office365connectors

Question

The problem
I am trying to build a configurable team tab with a custom connector but having serious issues when the teams app is installed and try to configure the connector. I created tab apps and they work fine. But the connector, on its own or with a tab fails to config.
The connector custom configuration page is opened in a new window and shows the config page but the Teams SDK does not initialize. The microsoftTeams.initialize() function doesn't seem to do anything. Callbacks for functions like microsoftTeams.settings.setSettings(settings) and microsoftTeams.settings.getSettings() are never called.
I have tried dozens of samples and both node.js and csharp projects. I have tried building connectors in the teams app builder, yo teams, and VSCode Teams Toolkit. I even tried different versions of the teams SDK. Made no difference.
I read all the SO questions and Teams SDK github issues and none of those suggestions or solutions made a difference.
Does anyone know if custom created Office 365 Connectors still work in Teams or what I am doing wrong?
Could it be my sandbox teams/office environment?
Here is my configuration:
Created a sandbox Office/Teams dev environment with fake users + Azure per
the docs. I have not tried production Teams/Office yet.
Changed the Teams admin setting to allow sideloading
Created connector registration (created multiple times, not edited)
on outlook.office.com.
Created the connector config page (in a few
different ways) Hosted on ngrok (and azure - made no difference)
Uploaded app in "Manage Your Apps" -> "Upload Custom App"
Select a Team channel to install the app
Configured connector in the Team Channel
Clicked "Visit Site To Install" link
Config page opens but none of the Teams SDK works - I added console.log everywhere to verify
Manifest:
This is the default Quick scaffolded yo teams configurable tab and connector
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.9/MicrosoftTeams.schema.json",
"manifestVersion": "1.9",
"id": "c8012880-98bc-11ec-bee3-ab9042a78ecb",
"version": "1.0.1",
"packageName": "tabappl",
"developer": {
"name": "mytest",
"websiteUrl": "https://48fb-80-233-63-141.ngrok.io",
"privacyUrl": "https://48fb-80-233-63-141.ngrok.io/privacy.html",
"termsOfUseUrl": "https://48fb-80-233-63-141.ngrok.io/tou.html"
},
"name": {
"short": "tabappl",
"full": "tabappl"
},
"description": {
"short": "TODO: add short description here",
"full": "TODO: add full description here"
},
"icons": {
"outline": "icon-outline.png",
"color": "icon-color.png"
},
"accentColor": "#D85028",
"configurableTabs": [
{
"configurationUrl": "https://48fb-80-233-63-141.ngrok.io/tab1Tab/config.html?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
"canUpdateConfiguration": true,
"scopes": [
"team"
]
}
],
"staticTabs": [],
"bots": [],
"connectors": [
{
"connectorId": "76a7925f-e99f-4d9e-970b-b1bee2390f2c",
"configurationUrl": "https://48fb-80-233-63-141.ngrok.io/tabapplConnector/config.html?name={loginHint}&tenant={tid}&group={groupId}&theme={theme}",
"scopes": [
"team"
]
}
],
"composeExtensions": [],
"permissions": [
"identity",
"messageTeamMembers"
],
"validDomains": [
"https://48fb-80-233-63-141.ngrok.io"
],
"showLoadingIndicator": false
}
The connector registration manifest (exported from outlook.office.com reg)
Connector is just registered, not published
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.3/MicrosoftTeams.schema.json",
"manifestVersion": "1.3",
"id": "76a7925f-e99f-4d9e-970b-b1bee2390f2c",
"version": "1.0.0",
"packageName": "com.tabappCon2",
"developer": {
"name": "Developer",
"websiteUrl": "https://48fb-80-233-63-141.ngrok.io",
"privacyUrl": "https://48fb-80-233-63-141.ngrok.io",
"termsOfUseUrl": "https://48fb-80-233-63-141.ngrok.io"
},
"description": {
"full": "tabappCon2",
"short": "tabappCon2"
},
"icons": {
"outline": "https://outlook.office.com/connectors/Content/Images/IncomingWebhook.jpg",
"color": "https://outlook.office.com/connectors/Content/Images/IncomingWebhook.jpg"
},
"connectors": [
{
"connectorId": "76a7925f-e99f-4d9e-970b-b1bee2390f2c",
"scopes": [
"team"
],
"configurationUrl": "https://48fb-80-233-63-141.ngrok.io/tabapplConnector/config.html"
}
],
"name": {
"full": "tabappCon2",
"short": "tabappCon2"
},
"accentColor": "#FFFFFF",
"validDomains": [
"https://48fb-80-233-63-141.ngrok.io"
],
"needsIdentity": "true"
}