Authentication utilities for Cognite Data Fusion React applications
npm install dune-fe-authAuthentication for Dune CDF React applications.
``bash`
npm install @cognite/dune-fe-auth
Wrap your application with the CDFAuthenticationProvider and pass your CDF configuration:
`tsx
import { CDFAuthenticationProvider, CDFConfig } from '@cognite/dune-fe-auth';
const cdfConfig: CDFConfig = {
project: 'your-project-name',
baseUrl: 'https://api.cognitedata.com',
clientId: 'your-client-id',
clientSecret: 'your-client-secret',
appId: 'your-app-name', // optional
};
function App() {
return (
);
}
`
Use the useCDF hook to access the Cognite SDK in your components:
`tsx
import { useCDF } from '@cognite/dune-fe-auth';
function MyComponent() {
const { sdk, isLoading, error } = useCDF();
if (error) {
return
$3
The package also exports utility functions for authentication:
tsx
import { getToken, createCDFSDK, EMPTY_SDK, CDFConfig } from '@cognite/dune-fe-auth';// Get an access token
const token = await getToken(clientId, clientSecret);
// Create a configured SDK directly
const config: CDFConfig = {
project: 'your-project',
baseUrl: 'https://api.cognitedata.com',
clientId: 'your-client-id',
clientSecret: 'your-client-secret',
};
const sdk = await createCDFSDK(config);
`$3
You can customize the loading and error states:
tsx
import { CDFAuthenticationProvider } from '@cognite/dune-fe-auth';function App() {
return (
loadingComponent={
Custom loading...}
errorComponent={(error) => Custom error: {error}}
>
);
}
`Deployment Script
This package includes a CLI tool for deploying Dune apps to CDF.
$3
bash
Using npx
npx cdf-deployOr install globally
npm install -g @cognite/dune-fe-auth
cdf-deploy
`$3
Create an
file in your project root:`json
{
"name": "My App",
"description": "Application description",
"externalId": "my-app",
"versionTag": "1.0.0",
"deployment": {
"org": "your-org",
"project": "your-project"
}
}
`$3
Security Note: Apps must be uploaded to a data set with external ID
. This security measure ensures that only authorized users (with write access to this data set) can deploy apps.Your IT admin needs to:
1. Create a data set with external ID
published-custom-apps
2. Grant write access to users who should be able to deploy appsIf the data set doesn't exist or you don't have access, deployment will fail with a clear error message.
$3
For automated deployments, use client credentials:
bash
Set environment variables
export CLIENT_ID="your-client-id"
export CLIENT_SECRET="your-client-secret"
export BASE_URL="https://api.cognitedata.com"Deploy
npx cdf-deploy --ci
` for detailed documentation.Configuration
The package uses prop-based configuration instead of environment variables for better security and flexibility.
Peer Dependencies
This package requires:
-
@cognite/sdk ^8.0.0
- react ^18.0.0Development
`bash
Install dependencies
npm installInitialize git submodule (required for auth-client source code)
git submodule update --init --recursiveBuild the package
npm run buildWatch for changes during development
npm run devPreview the built package
npm run previewType check
npm run type-check
`$3
This package uses a git submodule to bundle the
source code directly into the distribution. The submodule is located at src/vendor/cog-idp and points to the cog-idp repository.Important: When cloning this repository, make sure to initialize the submodule:
`bash
git submodule update --init --recursive
`The auth-client code is bundled during the build process, so consumers of the npm package don't need access to the submodule.
Publishing
bash
npm publish
``MIT