` HTML element with a valid `id` where the entry component of your app will be rendered.
For example:
```
DCV first connection
```
## Step 2: Authenticate, connect and render the `DCVViewer` React component.
This section shows how to complete the user authentication process, how to connect the Amazon DCV server, and how to render the `DCVViewer` React component.
First, from the `index.js` file, import `React` , `ReactDOM` and your top level `App` component.
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
Render the top level container node of your app.
```
ReactDOM.render(
,
document.getElementById("root")
);
```
In the `App.js` file, import the Amazon DCV Web Client SDK as a ESM module, the `DCVViewer` React component from the Amazon DCV Web UI SDK, `React` and the `Cloudscape Design Global Styles` package.
```
import React from "react";
import dcv from "dcv";
import "@cloudscape-design/global-styles/index.css";
import {DCVViewer} from "./dcv-ui/dcv-ui.js";
```
Following is an example showing how to authenticate against the Amazon DCV Server and render the `DCVViewer` React component from Amazon DCV Web UI SDK, provided the authentication was successful.
```
const LOG_LEVEL = dcv.LogLevel.INFO;
const SERVER_URL = "https://your-dcv-server-url:port/";
const BASE_URL = "/static/js/dcvjs";
let auth;
function App() {
const [authenticated, setAuthenticated] = React.useState(false);
const [sessionId, setSessionId] = React.useState('');
const [authToken, setAuthToken] = React.useState('');
const [credentials, setCredentials] = React.useState({});
const onSuccess = (_, result) => {
var { sessionId, authToken } = { ...result[0] };
console.log("Authentication successful.");
setSessionId(sessionId);
setAuthToken(authToken);
setAuthenticated(true);
setCredentials({});
}
const onPromptCredentials = (_, credentialsChallenge) => {
let requestedCredentials = {};
credentialsChallenge.requiredCredentials.forEach(challenge => requestedCredentials[challenge.name] = "");
setCredentials(requestedCredentials);
}
const authenticate = () => {
dcv.setLogLevel(LOG_LEVEL);
auth = dcv.authenticate(
SERVER_URL,
{
promptCredentials: onPromptCredentials,
error: onError,
success: onSuccess
}
);
}
const updateCredentials = (e) => {
const { name, value } = e.target;
setCredentials({
...credentials,
[name]: value
});
}
const submitCredentials = (e) => {
auth.sendCredentials(credentials);
e.preventDefault();
}
React.useEffect(() => {
if (!authenticated) {
authenticate();
}
}, [authenticated]);
const handleDisconnect = (reason) => {
console.log("Disconnected: " + reason.message + " (code: " + reason.code + ")");
auth.retry();
setAuthenticated(false);
}
return (
authenticated ?
:
);
}
const onError = (_, error) => {
console.log("Error during the authentication: " + error.message);
}
export default App;
```
The `promptCredentials` , `error` , and `success` functions are mandatory callback functions that must be defined in the authentication process.
If the Amazon DCV server prompts for credentials, the `promptCredentials` callback function receives the requested credential challenge from the Amazon DCV server. If the Amazon DCV server is configured to use system authentication, then the credentials must be provided in the form of a user name and a password.
If authentication fails, the `error` callback function receives an error object from the Amazon DCV server.
If the authentication succeeds, the `success` callback function receives an array of couples that includes the session id ( `sessionId` ) and authorization tokens ( `authToken` ) for each session that the user is allowed to connect to on the Amazon DCV server. The code sample above updates the React state to render the `DCVViewer` component on successful authentication.
To know more about the properties accepted by this component, see the [ Amazon DCV Web UI SDK reference](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer).
To know more about self-signed certificates, see the [ Redirection clarifications with self-signed certificates](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html).
## Updating from AWS-UI to Cloudscape Design System
Starting SDK version 1.3.0 we updated our `DCVViewer` component from AWS-UI to its evolution: [Cloudscape Design](https://cloudscape.design/).
Cloudscape uses a different visual theme than AWS-UI, but the underlying code base remains the same. Thus, migrating your application based on the `DCVViewer` should be easy. To migrate, replace the AWS-UI related NPM packages you've installed with the associated Cloudscape packages:
| AWS-UI package name | Cloudscape package name |
| --- | --- |
| @awsui/components-react | @cloudscape-design/components |
| @awsui/global-styles | @cloudscape-design/global-styles |
| @awsui/collection-hooks | @cloudscape-design/collection-hooks |
| @awsui/design-tokens | @cloudscape-design/design-tokens |
For further details on the migration please refear to the [AWS-UI GitHub documentation page](https://github.com/aws/awsui-documentation).