This repository shows you how to integrate Express.js, React, and Socket.IO to create a secure chat application. Please read Create a Secure Chat Application with Socket.IO and React to see how it was created.
Prerequisites:
Okta has Authentication and User Management APIs that reduce development time with instant-on, scalable user infrastructure. Okta's intuitive API and expert support make it easy for developers to authenticate, manage and secure users and roles in any application.
To run this example, run the following commands:
git clone https://github.com/oktadev/okta-socket-io-chat-example.git
cd okta-socket-io-chat-example
Create a free developer account with the following command using the Okta CLI:
okta register
If you already have a developer account, use okta login
to integrate it with the Okta CLI.
Provide the required information. Once you register, create a client application in Okta with the following command:
okta apps create
You will be prompted to select the following options:
- Type of Application: 2: SPA
- Redirect URI:
http://localhost:8080/login/callback
- Logout Redirect URI:
http://localhost:8080
The application configuration will be printed to your screen:
Okta application configuration:
Issuer: https://dev-133320.okta.com/oauth2/default
Client ID: 0oa5qedkihI7QcSoi357
You will also need to generate a token so that your chat server can communicate with the Okta authentication service. Run okta login
, open the resulting URL in your browser, sign-in, and navigate to Security > API.
Select the Tokens tab. Click on Create Token and type in a name for the token. In the following popup, you will be shown the token that has been generated.
Replace the values in chat-server/chat.js
with these values.
const jwtVerifier = new OktaJwtVerifier({
clientId: '{yourClientID}',
issuer: 'https://{yourOktaDomain}/oauth2/default',
});
const oktaClient = new okta.Client({
orgUrl: 'https://{yourOktaDomain}',
token: '{yourOktaAPIToken}',
});
Update chat-client/.env
with your Okta settings too.
PORT=8080
REACT_APP_OKTA_ORG_URL=https://{yourOktaDomain}
REACT_APP_OKTA_CLIENT_ID={yourClientID}
If you haven't done so already, install the dependencies.
cd chat-server
npm install
cd chat-client
npm install
Start the chat server in one terminal window with npm start
, and the chat client in another window.
npm start
Open http://localhost:8080
in your favorite browser and you should be able to log in.
This example uses the following open source libraries from Okta:
Please post any questions as comments on the blog post, or visit our Okta Developer Forums.
Apache 2.0, see LICENSE.