plain-lunch-50969
05/08/2024, 8:23 PMchilly-king-10285
05/08/2024, 8:23 PMchilly-king-10285
05/08/2024, 8:23 PMjsonnet local claims = std.extVar('claims'); { identity: { traits: { email: claims.email, }, }, }
This code snippet is used to map the email claim from the OIDC provider to the Ory Identity schema. The std.extVar('claims')
function is used to access the claims provided by the OIDC provider. Please note that you should not save secrets such as API keys, credentials, or personal data directly in Jsonnet code snippets. Jsonnet code snippets used for data mapping aren't stored in an encrypted format in Ory Network. After creating your Jsonnet code snippet, you need to encode it with Base64 or host it under a URL accessible to Ory Network. Here is an example of how you can encode your Jsonnet file with Base64: bash cat your-data-mapping.jsonnet | base64
For more information, you can refer to the [Ory documentation](https://www.ory.sh/docs/kratos/social-signin/spotify). Please remember to replace your-data-mapping.jsonnet
with the actual path to your Jsonnet file.plain-lunch-50969
05/08/2024, 8:24 PMchilly-king-10285
05/08/2024, 8:24 PMchilly-king-10285
05/08/2024, 8:24 PMprint
function provided by Ory in your Jsonnet code. This function is used to ensure that non-existent map values will simply return an empty string, rather than <no value>
. Here are some examples of how you can use the print
function to print incoming claims: 1. To print the subject extracted from the token: json { "config_field": "{{ print .Subject }}" }
2. To print an embedded value in the Extra
map (most of the time, it's a JWT token claim): json { "config_field": "{{ print .Extra.some.arbitrary.data }}" }
3. To print a Regex capture from the request URL: json { "claims": "{\"aud\": \"{{ print .Extra.aud }}\", \"resource\": \"{{ printIndex .MatchContext.RegexpCaptureGroups 0 }}\"" }
For more information, you can refer to the [Ory documentation](https://www.ory.sh/docs/oathkeeper/pipeline#configuration-examples).plain-lunch-50969
05/08/2024, 8:25 PMchilly-king-10285
05/08/2024, 8:25 PMchilly-king-10285
05/08/2024, 8:25 PMprint
function in the examples provided doesn't print the values to a console or a log file. Instead, it's used within the context of the Ory Oathkeeper's rule configuration to extract values from the incoming request and use them in the rule's configuration. For example, in the rule: json { "config_field": "{{ print .Subject }}" }
The print
function is used to extract the Subject
from the incoming request and use it in the config_field
. If you want to log these values for debugging purposes, you would need to implement this in your application's code. Ory itself does not provide a built-in method to print these values to a log. For more information, you can refer to the [Ory documentation](https://www.ory.sh/docs/oathkeeper/pipeline#configuration-examples).plain-lunch-50969
05/08/2024, 8:26 PMchilly-king-10285
05/08/2024, 8:26 PMchilly-king-10285
05/08/2024, 8:27 PMprint
function is not applicable. For debugging purposes in Ory Kratos, you would typically rely on the server logs. Ory Kratos logs the incoming requests and their responses, which should include the claims from the OIDC provider. To view these logs, you would need to check the output of the Ory Kratos server. The exact method to do this would depend on how you have deployed Ory Kratos. For example, if you're running Ory Kratos in a Docker container, you can use the docker logs
command. Please note that the level of detail in the logs may depend on the log level that you have configured for Ory Kratos. For more detailed logs, you can set the log level to debug
. Unfortunately, the provided knowledge sources do not include specific instructions or examples for logging in Ory Kratos. For more detailed information, you may want to refer to the [Ory Kratos documentation](https://www.ory.sh/kratos/docs/debug/logs/).plain-lunch-50969
05/08/2024, 9:31 PMchilly-king-10285
05/08/2024, 9:31 PMchilly-king-10285
05/08/2024, 9:32 PMmethods
payload in the login, registration, and settings flows. For example, in the login flow, the OIDC method will be included in the response as follows: json { "type": "input", "group": "oidc", "attributes": { "name": "provider", "type": "submit", "value": "github", "disabled": false }, "messages": null, "meta": { "label": { "id": 1010002, "text": "Sign in with github", "type": "info", "context": { "provider": "github" } } } }
In this example, the OIDC provider is GitHub, and it is represented by a "Sign in with github" button in the user interface. The same applies to the registration and settings flows. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/user-login#login-with-google-facebook-github--openid-connect--oauth-20).plain-lunch-50969
05/08/2024, 9:38 PMchilly-king-10285
05/08/2024, 9:38 PMchilly-king-10285
05/08/2024, 9:38 PMplain-lunch-50969
05/09/2024, 2:33 PMchilly-king-10285
05/09/2024, 2:33 PMchilly-king-10285
05/09/2024, 2:33 PMbash curl --request GET -sL \ --header "Content-Type: application/json" \ --header "Authorization: Bearer {ORY_API_KEY}" \ 'https://{project.slug}.<http://projects.oryapis.com/admin/identities/<identity_id>?include_credential=oidc|projects.oryapis.com/admin/identities/<identity_id>?include_credential=oidc>'
Replace {ORY_API_KEY}
with your actual Ory API key, {project.slug}
with your actual project slug, and <identity_id>
with the actual identity ID. The response will include the OIDC provider tokens, which contain the claims returned by the OIDC provider. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/social-signin/get-tokens).plain-lunch-50969
05/09/2024, 2:36 PMchilly-king-10285
05/09/2024, 2:36 PMchilly-king-10285
05/09/2024, 2:36 PMplain-lunch-50969
05/09/2024, 3:06 PMchilly-king-10285
05/09/2024, 3:06 PMchilly-king-10285
05/09/2024, 3:07 PMdebug
. However, please note that logging sensitive information such as claims could potentially expose user data, so it's important to ensure that your logs are properly secured. For more information on logging in Ory Kratos, you may want to refer to the [Ory Kratos documentation](https://www.ory.sh/kratos/docs/debug/logs/).plain-lunch-50969
05/09/2024, 3:37 PMchilly-king-10285
05/09/2024, 3:37 PMchilly-king-10285
05/09/2024, 3:38 PMbefore
login: The hook runs when the user starts the login flow. 2. after
login: The hook runs when the user is successfully authenticated, before the system issues an Ory Session. 3. before
registration: The hook runs when a registration flow starts. 4. after
registration: The hook runs when a user successfully registers in the system. 5. before
recovery: The hook runs when the user starts the recovery flow. 6. after
recovery: The hook runs when the user successfully recovers their password. 7. before
settings: The hook runs when the user starts the account settings flow. 8. after
settings: The hook runs when the user successfully changes their account settings. 9. before
verification: The hook runs when the user starts the verification flow. 10. after
verification: The hook runs when the user verifies their account. For example, when a user signs in with a password, you can use Ory Actions to send a welcome email to the user or update user information in your database. When a user signs in using OIDC, you can use Ory Actions to enrich your CRM with data from the social sign-in provider. Here is an example of how you can add the session
hook which will issue a session after successful registration: yaml selfservice: flows: registration: after: password: hooks: - hook: session oidc: hooks: - hook: session # Always enable this for oidc flows or the user experience suffers significantly!
For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/hooks/configure-hooks#triggers-based-on-authentication-methods) and [Ory Kratos documentation](https://www.ory.sh/docs/kratos/hooks/configure-hooks#action-triggers).plain-lunch-50969
05/09/2024, 3:40 PMchilly-king-10285
05/09/2024, 3:40 PMchilly-king-10285
05/09/2024, 3:41 PMredirect
error handler in Ory Oathkeeper. This handler returns a HTTP 302/301 response with a Location
Header. You can define error matching conditions under the when
key. If you want to append the current URL (where the error happened) to the address redirected to, you can specify return_to_query_param
to set the name of the parameter that will hold the URL. Here is an example: json { "handler": "json", "config": { "to": "<http://my-website/login>", "return_to_query_param": "return_to", "code": 301, "when": [ // ... ] } }
In this example, when the user accesses a protected URL <http://my-website/settings>
, they will be redirected to <http://my-website/login?return_to=http%3A%2F%2Fmy-website%2Fsettings>
. The login page can use the return_to
parameter to return the user to the intended page after a successful login. Please note that this feature is available in Ory Oathkeeper and not in Ory Kratos. For more information, you can refer to the [Ory Oathkeeper documentation](https://www.ory.sh/docs/oathkeeper/pipeline/error#redirect).plain-lunch-50969
05/09/2024, 3:41 PMchilly-king-10285
05/09/2024, 3:41 PMchilly-king-10285
05/09/2024, 3:42 PMreturn_to
URL. After the flow is completed, Ory Kratos will redirect the user to the return_to
URL. Here is an example of how you can initiate a login flow with a return_to
URL: bash curl -X GET "https://<kratos_public>/self-service/login/browser?return_to=https://<your_app>/dashboard"
In this example, after the user completes the login flow, they will be redirected to https://<your_app>/dashboard
. Please note that the return_to
URL must be allowed in the Ory Kratos configuration. You can specify allowed return URLs using the urls.whitelisted_return_to_urls
configuration option. Unfortunately, the provided knowledge sources do not include specific examples of using hooks to redirect to a web page in Ory Kratos. For more detailed information, you may want to refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/user-login#redirects).plain-lunch-50969
05/09/2024, 3:48 PMchilly-king-10285
05/09/2024, 3:48 PMchilly-king-10285
05/09/2024, 3:48 PMcode
query parameter. 3. Ory Kratos exchanges the code
for an access token and retrieves the user information. 4. Ory Kratos maps the user information to the Identity Schema traits. 5. If the data does not validate against the Identity Schema (i.e., some required fields are missing), Ory Kratos redirects the user back to the registration page to fill in the missing fields. When the user submits the form again, the data provided by the user and the data coming from the OIDC provider will be merged. This process repeats itself until the Identity's traits are valid against the defined JSON Schema. Here's an example of how you can define mandatory fields in the Identity Schema: json { "$id": "<https://schemas.ory.sh/presets/kratos/identity.basic.schema.json>", "title": "Person", "type": "object", "properties": { "traits": { "type": "object", "properties": { "email": { "type": "string", "format": "email", "title": "Email address", "<http://ory.sh/kratos|ory.sh/kratos>": { "credentials": { "password": { "identifier": true }, "webauthn": { "identifier": true }, "totp": { "account_name": true } }, "recovery": { "via": "email" }, "verification": { "via": "email" } }, "maxLength": 320 }, "name": { "type": "object", "required": [ "last" ], "properties": { "first": { "type": "string", "title": "First name", "maxLength": 256 }, "last": { "type": "string", "title": "Last name", "maxLength": 256 } } } }, "required": [ "email" ], "additionalProperties": false } } }
In this example, the email
and last
name fields are mandatory. If the OIDC provider does not return these fields, the user will be asked to provide them. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/social-signin/data-mapping#fill-in-the-data-gaps) and [Ory Kratos documentation](https://www.ory.sh/docs/kratos/manage-identities/customize-identity-schema#mandatory-fields-for-registration).plain-lunch-50969
05/09/2024, 5:49 PMchilly-king-10285
05/09/2024, 5:49 PMchilly-king-10285
05/09/2024, 5:50 PMcode
query parameter. 3. Ory Kratos exchanges the code
for an access token and retrieves the user information. 4. If the user has already signed up with the given provider before, the user will simply be logged in and no new Ory Identity will be created. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/user-login#login-with-google-facebook-github--openid-connect--oauth-20).plain-lunch-50969
05/09/2024, 5:55 PMchilly-king-10285
05/09/2024, 5:55 PMchilly-king-10285
05/09/2024, 5:55 PMsub
field, which is returned by OpenID Connect and OAuth2 servers. This field is used as the primary credential identifier for the provider, allowing Ory Kratos to link the identity to the "social sign-in profile" for future login flows. Here's an example of how the data is stored in Ory Kratos: yaml # This is the YAML representation of an identity id: "9f425a8d-7efc-4768-8f23-7647a74fdf13" credentials: oidc: id: oidc identifiers: - example:some-identity-id-4hA8gk config: - provider: example identifier: some-identity-id-4hA8gk schema_id: some-example traits: email: [[email protected]](<https://www.ory.sh/cdn-cgi/l/email-protection>) metadata_public: github_username: foo-user
In this example, the sub
field from the OIDC provider is stored as an identifier under the oidc
credentials. This identifier is used to link the identity to the OIDC provider for future login flows. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/social-signin/data-mapping#end-to-end-github-example).plain-lunch-50969
05/09/2024, 8:50 PMchilly-king-10285
05/09/2024, 8:50 PMchilly-king-10285
05/09/2024, 8:51 PMplain-lunch-50969
05/09/2024, 8:51 PMchilly-king-10285
05/09/2024, 8:51 PMchilly-king-10285
05/09/2024, 8:52 PMhttp(s)://<domain-of-ory-kratos>:<public-port>/self-service/methods/oidc/callback/<social-signin-provider-id>
. 2. Create a client at your provider to get the Client ID and Client Secret. 3. Set the redirect URI to the URL that follows the pattern mentioned in step 1. 4. Create a [Jsonnet code snippet](https://www.ory.sh/docs/kratos/social-signin/data-mapping) to map the desired claims to the Ory Identity schema. 5. Encode the Jsonnet snippet with [Base64](https://www.base64encode.org/) or store it in a location available to your Ory Kratos instance. 6. Add the configuration for your social sign-in provider to the Ory Kratos configuration. Add the Jsonnet snippet with mappings as a Base64 string or provide a path or an URL of the file. Here is an example configuration: yaml selfservice: methods: oidc: config: providers: - id: generic # this is `<provider-id>` in the Authorization callback URL. DO NOT CHANGE IT ONCE SET! provider: generic client_id: .... # Replace this with the Client ID client_secret: .... # Replace this with the Client secret issuer_url: <https://accounts.google.com> # Replace this with the providers issuer URL mapper_url: "base64://{YOUR_BASE64_ENCODED_JSONNET_HERE}" # Alternatively, use an URL: # mapper_url: <https://storage.googleapis.com/abc-cde-prd/9cac9717f007808bf17> scope: - email # supported scopes can be found in your providers dev docs enabled: true
For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/self-hosted/kratos/configuration/oidc).plain-lunch-50969
05/09/2024, 8:52 PMchilly-king-10285
05/09/2024, 8:52 PMchilly-king-10285
05/09/2024, 8:53 PMprovider
query parameter set to the ID of the OIDC provider. 2. Use custom text: You can use any text you want in the button or anywhere else in your user interface. The text is not dictated by Ory Kratos and can be fully customized in your application. 3. Handle error messages: Ory Kratos returns machine-readable error messages that can be displayed in the user interface. You can customize these error messages in your application code. For example, in a React application, you might have something like this: jsx <button onClick={() => window.location.href = 'http://<kratos_public>/self-service/browser/flows/login?provider=github'}> Sign in with GitHub </button>
In this example, replace <kratos_public>
with your actual Ory Kratos public URL. For more detailed information on how to build a custom user interface for Ory Kratos, you may want to refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/user-login#redirects). Additionally, Ory has recently introduced translations into Ory Elements and Ory Kratos and will be providing a way of adding custom translations or custom text to a supported language through the Ory Elements IntlProvider
. You can follow the progress of this feature in this [GitHub pull request](https://github.com/ory/elements/pull/158).plain-lunch-50969
05/09/2024, 8:54 PMchilly-king-10285
05/09/2024, 8:54 PMchilly-king-10285
05/09/2024, 8:54 PMthemeOverrides
prop to the ThemeProvider
component. This allows you to override the default styles of the components. 3. Customize the text: Ory Elements supports internationalization (i18n). You can provide your own translations or customize the text by using the IntlProvider
component. Here's an example of how you can customize the styles of the Ory Elements components: jsx import { ThemeProvider } from '@ory/elements'; const themeOverrides = { colors: { primary: '#your-primary-color', // other colors... }, // other theme properties... }; function App() { return ( <ThemeProvider themeOverrides={themeOverrides}> {/* your application code */} </ThemeProvider> ); }
In this example, replace #your-primary-color
with your actual primary color. For more detailed information on how to customize Ory Elements, you may want to refer to the [Ory Elements documentation](https://github.com/ory/elements/).plain-lunch-50969
05/09/2024, 8:55 PMchilly-king-10285
05/09/2024, 8:55 PMchilly-king-10285
05/09/2024, 8:56 PMthemeOverrides
prop to the ThemeProvider
component to override the default styles of the components. Here's an example of how you can customize the styles of the Ory Elements components: jsx import { ThemeProvider } from '@ory/elements'; const themeOverrides = { colors: { primary: '#your-primary-color', // other colors... }, // other theme properties... }; function App() { return ( <ThemeProvider themeOverrides={themeOverrides}> {/* your application code */} </ThemeProvider> ); }
In this example, replace #your-primary-color
with your actual primary color. For more detailed information on how to customize Ory Elements, you may want to refer to the [Ory Elements documentation](https://github.com/ory/elements/). If you need to customize specific OIDC elements, you might need to dive deeper into the Ory Elements source code or reach out to the Ory community for more specific guidance.plain-lunch-50969
05/10/2024, 3:26 PMchilly-king-10285
05/10/2024, 3:26 PMchilly-king-10285
05/10/2024, 3:27 PMonSubmit
handler is not being called during this process, it could be due to a few reasons: 1. Form submission is being prevented: Check if there's any JavaScript code that might be preventing the form submission. This could be due to form validation errors or other JavaScript errors. 2. Incorrect form action URL: The form's action URL should be set to the /self-service/registration
endpoint. If it's set to a different URL, the onSubmit
handler might not be called. 3. Server-side issues: If there's an issue on the server-side (e.g., the server is not responding or there's an error in the server-side code), the onSubmit
handler might not be called. To debug this issue, you could: - Check the browser's console for any JavaScript errors. - Use the browser's network inspector to see if the form submission request is being sent and what the server's response is. - Check the server logs for any errors. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/user-registration#registration-with-google-facebook-github--openid-connect--oauth-20-1).plain-lunch-50969
05/10/2024, 8:22 PMchilly-king-10285
05/10/2024, 8:22 PMchilly-king-10285
05/10/2024, 8:22 PMgo package main import ( "context" "fmt" "os" client "<http://github.com/ory/kratos-client-go|github.com/ory/kratos-client-go>" ) func main() { configuration := client.NewConfiguration() configuration.Servers = []client.ServerConfiguration{ { URL: "<http://127.0.0.1:4434>", // Kratos Admin API }, } apiClient := client.NewAPIClient(configuration) // Initiate the password reset flow flow, _, err := apiClient.AdminApi.InitializeSelfServiceRecoveryFlowWithoutBrowser(context.Background()).Execute() if err != nil { fmt.Fprintf(os.Stderr, "Error when calling `AdminApi.InitializeSelfServiceRecoveryFlowWithoutBrowser`: %v\n", err) os.Exit(1) } // Print the recovery flow URL fmt.Printf("Recovery flow URL: %s\n", *flow.RecoveryLink) }
This code initiates a password reset (recovery) flow and prints the URL to the recovery flow. The user should visit this URL to reset their password. Please note that this is a simplified example and does not handle all possible error cases. Also, replace "<http://127.0.0.1:4434>"
with the actual URL of your Ory Kratos Admin API. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/account-recovery-password-reset#code-examples).plain-lunch-50969
05/10/2024, 8:23 PMchilly-king-10285
05/10/2024, 8:23 PMchilly-king-10285
05/10/2024, 8:24 PMPUT /admin/identities/{id}
endpoint. This endpoint updates an identity and it is possible to update the identity's credentials as well. Here's an example of how you can use this endpoint in Go: go package main import ( "context" "fmt" "os" client "<http://github.com/ory/kratos-client-go|github.com/ory/kratos-client-go>" "<http://github.com/ory/kratos-client-go/models|github.com/ory/kratos-client-go/models>" ) func main() { configuration := client.NewConfiguration() configuration.Servers = []client.ServerConfiguration{ { URL: "<http://127.0.0.1:4434>", // Kratos Admin API }, } apiClient := client.NewAPIClient(configuration) // The ID of the identity you want to update identityID := "your-identity-id" // The new credentials newCredentials := map[string]models.IdentityCredentials{ "password": { Config: &models.IdentityCredentialsConfig{ // The hashed new password HashedPassword: "your-hashed-new-password", }, }, } // The identity payload identity := models.Identity{ ID: identityID, Credentials: newCredentials, // Other identity fields... } // Update the identity _, _, err := apiClient.AdminApi.UpdateIdentity(context.Background(), identityID).Identity(identity).Execute() if err != nil { fmt.Fprintf(os.Stderr, "Error when calling `AdminApi.UpdateIdentity`: %v\n", err) os.Exit(1) } fmt.Println("Identity updated successfully") }
In this example, replace "your-identity-id"
with the actual ID of the identity you want to update, and "your-hashed-new-password"
with the hashed new password. Please note that this is a simplified example and does not handle all possible error cases. Also, replace "<http://127.0.0.1:4434>"
with the actual URL of your Ory Kratos Admin API. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/reference/api#update-an-identity).plain-lunch-50969
05/10/2024, 8:28 PMplain-lunch-50969
05/10/2024, 8:28 PMchilly-king-10285
05/10/2024, 8:28 PMchilly-king-10285
05/10/2024, 8:29 PMIdentityApiUpdateIdentityRequest
method. Here's an example: go package main import ( "context" "fmt" "os" "<http://github.com/ory/kratos-client-go/client/admin|github.com/ory/kratos-client-go/client/admin>" "<http://github.com/ory/kratos-client-go/models|github.com/ory/kratos-client-go/models>" ) func main() { configuration := admin.NewConfiguration() configuration.Servers = []admin.ServerConfiguration{ { URL: "<http://127.0.0.1:4434>", // Kratos Admin API }, } apiClient := admin.NewAPIClient(configuration) // The ID of the identity you want to update identityID := "your-identity-id" // The new credentials newCredentials := map[string]models.IdentityCredentials{ "password": { Config: &models.IdentityCredentialsConfig{ // The hashed new password HashedPassword: "your-hashed-new-password", }, }, } // The identity payload identity := models.Identity{ ID: identityID, Credentials: newCredentials, // Other identity fields... } // Update the identity _, err := apiClient.Admin.UpdateIdentity( admin.NewUpdateIdentityParamsWithContext(context.Background()). WithID(identityID). WithBody(&identity), ) if err != nil { fmt.Fprintf(os.Stderr, "Error when calling `AdminApi.UpdateIdentity`: %v\n", err) os.Exit(1) } fmt.Println("Identity updated successfully") }
In this example, replace "your-identity-id"
with the actual ID of the identity you want to update, and "your-hashed-new-password"
with the hashed new password. Please note that this is a simplified example and does not handle all possible error cases. Also, replace "<http://127.0.0.1:4434>"
with the actual URL of your Ory Kratos Admin API. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/reference/api#update-an-identity).plain-lunch-50969
05/10/2024, 8:32 PMchilly-king-10285
05/10/2024, 8:32 PMchilly-king-10285
05/10/2024, 8:32 PMplain-lunch-50969
05/10/2024, 8:33 PMchilly-king-10285
05/10/2024, 8:33 PMchilly-king-10285
05/10/2024, 8:33 PMplain-lunch-50969
05/10/2024, 8:35 PMchilly-king-10285
05/10/2024, 8:35 PMchilly-king-10285
05/10/2024, 8:36 PMplain-lunch-50969
05/16/2024, 6:54 PMchilly-king-10285
05/16/2024, 6:54 PMchilly-king-10285
05/16/2024, 6:55 PMselfservice.flows.error.ui_url
configuration or SELFSERVICE_FLOWS_ERROR_UI_URL
environment variable. The route matching this URL should make a request to Ory Kratos' Public or Admin API to retrieve the error details and display them in the user interface. Here's an example of how an error message might look: json [ { "code": 500, "message": "no such file or directory" } ]
Errors have the following keys defined: json { "code": 500, "message": "some message", "reason": "some reason", "debug": "some debug info" }
You can use these details to display the error message in your user interface using Ory Elements. For more information, you can refer to the [Ory Kratos documentation](https://www.ory.sh/docs/kratos/self-service/flows/user-facing-errors).plain-lunch-50969
05/16/2024, 6:56 PMchilly-king-10285
05/16/2024, 6:56 PMchilly-king-10285
05/16/2024, 6:56 PMplain-lunch-50969
05/16/2024, 6:58 PMchilly-king-10285
05/16/2024, 6:58 PMchilly-king-10285
05/16/2024, 6:58 PMjsx import React from 'react'; import { useQuery } from 'react-query'; import { toForm } from '@ory/integrations/react'; import { Form, Message } from '@ory/elements'; import config from '../config'; import kratos from '../kratos'; const Error = () => { const { isLoading, isError, error, data: flow } = useQuery( 'error', () => kratos.getSelfServiceError(), { retry: false } ); if (isLoading) { return <div>Loading...</div>; } if (isError) { return <div>Error: {error.message}</div>; } return ( <div> <h2>Error</h2> {flow.messages.map((message, i) => ( <Message key={i} title={message.text} variant={message.type} /> ))} <Form action={config.kratos.browser} method="get" fields={toForm(flow.methods.link.config.fields)} /> </div> ); }; export default Error;
In this example, the Error
component uses the getSelfServiceError
function from the Kratos client to fetch the error details. It then displays the error messages using the Message
component from Ory Elements. If the error flow includes a form (for example, for a password reset link), it displays the form using the Form
component. Please note that this is a simplified example and does not handle all possible error cases. You might need to adjust this code to fit your specific use case. For more information, you can refer to the [Ory Elements documentation](https://github.com/ory/elements/).plain-lunch-50969
05/22/2024, 5:47 PMchilly-king-10285
05/22/2024, 5:47 PMchilly-king-10285
05/22/2024, 5:48 PMThemeProvider
component from Ory Elements and pass a themeOverrides
prop to it. The themeOverrides
prop allows you to override the default styles of the components, including the font. Here's an example of how you can customize the font of the Ory Elements components: jsx import { ThemeProvider } from '@ory/elements'; const themeOverrides = { typography: { fontFamily: '"Your Font", sans-serif', // replace "Your Font" with your actual font // other typography properties... }, // other theme properties... }; function App() { return ( <ThemeProvider themeOverrides={themeOverrides}> {/* your application code */} </ThemeProvider> ); }
In this example, replace "Your Font"
with your actual font. Please note that you need to ensure that the font you want to use is available in your application. If you're using a custom font, you might need to import it in your CSS or HTML file. For more detailed information on how to customize Ory Elements, you may want to refer to the [Ory Elements documentation](https://github.com/ory/elements/).plain-lunch-50969
05/22/2024, 5:54 PMchilly-king-10285
05/22/2024, 5:54 PMchilly-king-10285
05/22/2024, 5:55 PMfontFamily
property in the themeOverrides
prop of the ThemeProvider
component, as shown in the previous example. Please note that if you're using a custom font or a font from a font service, you need to ensure that the font is properly imported and available in your application. This usually involves adding a @import
statement in your CSS file or a <link>
tag in your HTML file. For more information on how to customize the styles of Ory Elements, you can refer to the [Ory Elements documentation](https://github.com/ory/elements/).plain-lunch-50969
05/22/2024, 6:09 PMchilly-king-10285
05/22/2024, 6:09 PMchilly-king-10285
05/22/2024, 6:10 PMfontStyle
property in the theme override is used to specify the font style for the text. It can take the following values: - `"normal"`: The text is shown normally. This is the default value. - `"italic"`: The text is shown in italics. - `"oblique"`: The text is "leaning" (oblique is very similar to italic, but less supported). Here's an example of how you can use it: jsx const themeOverrides = { typography: { fontStyle: "italic", // replace "italic" with "normal", "oblique", or "italic" as per your requirement // other typography properties... }, // other theme properties... }; function App() { return ( <ThemeProvider themeOverrides={themeOverrides}> {/* your application code */} </ThemeProvider> ); }
In this example, all the text in the Ory Elements components will be displayed in italics. Please note that not all fonts support all font styles. If a font doesn't support a particular style, the browser will try to simulate it, which might not always give the desired result. For more information on how to customize the styles of Ory Elements, you can refer to the [Ory Elements documentation](https://github.com/ory/elements/).plain-lunch-50969
05/22/2024, 6:24 PM--ory-theme-font-family
?chilly-king-10285
05/22/2024, 6:24 PMchilly-king-10285
05/22/2024, 6:24 PM--ory-theme-font-family
CSS variable. Ory Elements uses CSS variables for theming, which allows you to override the default styles using CSS. Here's an example of how you can set the font using CSS: css :root { --ory-theme-font-family: 'Your Font', sans-serif; /* replace 'Your Font' with your actual font */ }
In this example, replace 'Your Font'
with your actual font. Please note that you need to ensure that the font you want to use is available in your application. If you're using a custom font, you might need to import it in your CSS or HTML file. For more information on how to customize the styles of Ory Elements, you can refer to the [Ory Elements documentation](https://github.com/ory/elements/).