Amplify PubSub javascript subscribe and publish using cognito authorization: how to? - websocket

Question

i want a cognito authorized user to be able to publish and subscribe to AWS IoT using Amplify PubSub but am having difficulty doing so.
i use javascript (inside a Vue app)
i have successfully managed to publish and subscribe to AWS IoT using the aws-iot-device-sdk so all the policies, etc are working.
here's the code i'm using with PubSub:
const region = "eu-west-1";
const endpoint = "blahBlah-ats.iot.eu-west-1.amazonaws.com";
const currentlySubscribedTopic = "myTopic";
Amplify.addPluggable(
new AWSIoTProvider({
aws_pubsub_region: region,
// aws_pubsub_endpoint: "xxxxxxzbx-ats.iot.eu-west-1.amazonaws.com"
// aws_pubsub_endpoint: 'wss://xxxxxxxxxxxxx.iot.<YOUR-IOT-REGION>.amazonaws.com/mqtt',
aws_pubsub_endpoint: "wss://" + endpoint + "/mqtt"
})
);
to subscribe:
PubSub.subscribe(currentlySubscribedTopic).subscribe({
next: data => console.log("Message received", data),
error: error => console.error(error),
close: () => console.log("Done")
});
to publish I call this method:
async publishMessage() {
console.log("publishing message...");
await PubSub.publish(currentlySubscribedTopic, {
msg: "Hello to all subscribers!"
});
console.log("published..");
}
unfortunately nothing happens (not even errors), so I am obviously doing something wrong.
how do i actually make the connection? is there a connect() function?
how do i incorporate the cognito credentials? i have tried this inside Auth.currentSession():
AWS.config.update({
region: "eu-west-1",
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: "eu-west-1:xxxx-7be8-487a-9e0b-91980xxx976e",
Logins: {
// optional tokens, used for authenticated login
"cognito-idp.eu-west-1.amazonaws.com/eu-west-1_xxxx4OFmI":
session.idToken.jwtToken
}
})
});
and can use AWS.config.credentials.get() to get the credentials but don't know how to use them to make the connection.
i'd appreciate some help as to how to do this.
thanks

Answer 1

I was toiling with this for quite awhile today and finally got it working. Pasting my code below. Though its not shown, the PubSub.publish() also worked fine too.
# App.js
import React from 'react';
import './App.css';
import Amplify from 'aws-amplify';
import PubSub from '#aws-amplify/pubsub';
import { AWSIoTProvider } from '#aws-amplify/pubsub/lib/Providers';
import awsconfig from './aws-exports';
import { withAuthenticator, AmplifySignOut } from '#aws-amplify/ui-react';
import EventViewer from './event-viewer.js';
Amplify.Logger.LOG_LEVEL = 'VERBOSE';
Amplify.addPluggable(new AWSIoTProvider({
aws_pubsub_region: 'us-west-2',
aws_pubsub_endpoint: 'wss://MY_IOT_ENDPOINT-ats.iot.us-west-2.amazonaws.com/mqtt',
}));
Amplify.configure(awsconfig);
PubSub.configure();
PubSub.subscribe('myTopic1').subscribe({
next: data => console.log('Message received', data),
error: error => console.error(error),
close: () => console.log('Done'),
});
function App() {
return (
<div className="App">
<AmplifySignOut />
<EventViewer/>
</div>
);
}
export default withAuthenticator(App);
Keep in mind, this also requires that:
You have created a proper AWS IoT policy (e.g. for example, having iot:Connect, and having iot:Subscribe and iot:Receive scoped to the appropriate topics)
You have attached the IoT Policy to your user's Cognito Federated Identity Id