ZITADEL React

https://github.com/zitadel/zitadel-react

Admin

Authenticate your ZITADEL users within your React applications using the ZITADEL React SDK for OIDC...

Tokens:1,089

Snippets:5

Trust Score:9.5

Update:1 year ago

Show doc for...

Tokens:

Raw

### Install Example App Dependencies

Source: https://github.com/zitadel/zitadel-react/blob/main/README.md

Installs the dependencies for the example React application after the library has been built. This command should be run from the project's root directory.

```bash
cd ..
yarn install
```

--------------------------------

### Build @zitadel/react Library

Source: https://github.com/zitadel/zitadel-react/blob/main/README.md

Installs dependencies and builds the @zitadel/react library from the /lib directory. This is a prerequisite for running the example React application.

```bash
cd ./lib
yarn install
yarn build
```

--------------------------------

### Start React Development Server

Source: https://github.com/zitadel/zitadel-react/blob/main/README.md

Runs the React application in development mode. It opens the application at http://localhost:3000 and enables hot reloading for code changes.

```bash
yarn start
```

--------------------------------

### Build React App for Production

Source: https://github.com/zitadel/zitadel-react/blob/main/README.md

Builds the React application for production, optimizing it for performance. The output is placed in the 'build' folder and is ready for deployment.

```bash
yarn build
```

--------------------------------

### Create ZITADEL Auth Configuration (TypeScript)

Source: https://github.com/zitadel/zitadel-react/blob/main/lib/README.md

This snippet demonstrates how to create a minimal OIDC configuration for ZITADEL authentication in a React application using the `@zitadel/react` SDK. It requires the ZITADEL instance origin and the client ID of your application.

```typescript
import { createZitadelAuth } from "@zitadel/react";

const zitadelAuth = createZitadelAuth({
  authority: `${myZITADELInstancesOrigin}`,
  client_id: `${myApplicationsClientID}`,
});
```

Tokens:

Raw