mirror of
https://github.com/andwati/zitadel.git
synced 2026-10-20 06:24:25 +00:00
6f07b8deee
# Which Problems Are Solved The quickstart only shows the steps to take to get a working zitadel login into your app with react. For users with another framework or languages we didn't show how to get to success fast. # How the Problems Are Solved - Adding different frameworks to the qucisktart example - Make sure the app configurations in the onboarding flow from the console match the configurations from the examples - Docs link in console onboarding flow point towards quickstart - Quickstart accepts framework selector, to pre select a framework from another page --------- Co-authored-by: Federico Coppede <[email protected]> Co-authored-by: Copilot <[email protected]>
41 lines
2.3 KiB
Plaintext
41 lines
2.3 KiB
Plaintext
import ProjectClientIdImg from '@pub/img/guides/quickstart/project_client_id.png'
|
|
import ProjectClientIdSecretImg from '@pub/img/guides/quickstart/project_client_id_secret.png'
|
|
import ProjectUrlsImg from '@pub/img/guides/quickstart/project_urls.png'
|
|
import ProjectProjectIdImg from '@pub/img/guides/quickstart/project_project_id.png'
|
|
|
|
export default function AppValue({ valueCount, clientSecret, projectID }) {
|
|
return (
|
|
<div>
|
|
<p>
|
|
To connect your application to ZITADEL, you need {valueCount} primary configuration values.
|
|
These are typically stored as environment variables in your project.
|
|
</p>
|
|
<ol>
|
|
{!!clientSecret == false && (<li>
|
|
<b>Client ID</b> Navigate to Configurations in the left sidebar. This is the unique public identifier for your React application.
|
|
<img
|
|
src={ProjectClientIdImg.src} alt="Get Client ID"/>
|
|
</li>)}
|
|
{!!clientSecret && (<li>
|
|
<b>Client ID & Client Secret</b> Copy the client id and secret from the modal. The client id is the unique public identifier for your application.
|
|
Note: If you missed copy the secret, you can generate a new one in the Actions dropdown.
|
|
<img
|
|
src={ProjectClientIdSecretImg.src} alt="Get Client ID and Secret"/>
|
|
</li>)}
|
|
<li>
|
|
<b>Issuer URL</b> Click on URLs in the left sidebar to find your <b>Discovery Endpoint</b>.
|
|
- The Value: Copy the issuer URL (e.g., https://your-instance.zitadel.cloud).
|
|
- Why it matters: ZITADEL supports OIDC Discovery. By providing just the Issuer URL to your SDK, the library automatically finds the login, logout, and token endpoints for you.
|
|
|
|
<img src={ProjectUrlsImg.src} alt="Get URLs"/>
|
|
</li>
|
|
{!!projectID && (<li >
|
|
<b>Project ID</b> Your currently in the application configuration which is a sub resource of the Project. Navigate to the Project with the back arrow and copy the Project ID.
|
|
|
|
<img src={ProjectProjectIdImg.src} alt="Get Project ID"/>
|
|
</li>)}
|
|
</ol>
|
|
</div>
|
|
|
|
);
|
|
} |