Hello, nice package! The examples have been extremely helpful, I've got keycloak up and running (using @react-keycloak/web) in dev and production environments and things are working really well! Loving it so far 💙

That said, I have one last hump I'm trying to get past and I need a little help - I have my own login page/form and I'd like to be able to pass the users credentials from that directly to keycloak without having to use the stock keycloak login form. The examples only show using login() with no options which directs you to the stock login form.

I've looked through KeycloakLoginOptions and found that by passing prompt: 'none' I can stop the auto-redirect, but the docs/examples don't really explain anything further on how to authenticate manually.

I looked through the other packages (core/ssr) but still don't see any options for setting the username/password for the login method. Any pointers you could share on this? Even just something high-level would be much appreciated.

Thanks in advance for any help you may be able to provide - it will go a long way!

Can you provide me this flow in JavaScript and one more thing could you explain the flow of @react key-cloak if u can.

Thanks for your response in advance.

react-router example:
After an automatic token refresh, the old token is sent in the API header, not the newly received one, resulting in 401 from the API server.

This can be fixed by setting the auth header in an axios request interceptor.

Describe the bug
Unsure if this is normal, but when using the NextJS example a warning is consistently triggered, Warning: Text content did not match, which is coming from the <Header /> component.

On the server, the useKeycloak() hook is returning true for both initialized and keycloak.authenticated. Then, on the client, it goes back to initialized being false and keycloak being undefined.

Do we just have to abandon using the server-side auth state since it's always going to be wiped and re-initialized on the client?

To Reproduce
Steps to reproduce the behavior:

1. Configure to a valid Keycloak server
2. Load the NextJS example
3. Authenticate with Keycloak
4. Observe on every page load, a Warning: Text content did not match error happens from the <Header /> component.

Expected behavior
Unsure. Is this expected behavior?

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser: Chrome
• Version: 85

Hey there. Thank you for creating these examples. It's been super helpful. Just wondering, any chance you could create the react-router project in js?

Following the react example, trying the login I get:
error: "invalid_request"
error_description: "Missing+parameter%3A+code_challenge_method"

My keycloak.js file is configured correctly with the url, clientid and realm.

Screenshots

Desktop (please complete the following information):

• OS: macOS
• Browser chrome, firefox
• Version latests

Hi!
I was able to execute the next.js example with a keycloak server running on docker, great work!!
What I don't understand is how to protect next.js routes, in the example you are returning different content if the user is logged in or not.
But to be able to use this library what I need to know is how to allow access to a page or redirect to keycloak login if a user is not logged in.
Can someone provide some advice on how to achieve this?

Hi,

I am using keycloak with my next application. I want to configure silentCheckSsoRedirectUri with keycloakProvider. But if I tried to do it kecloak does not work (getting errors 404 for check-sso.html).
Here is my code. please have a look and help me out.

const keycloakCfg = {
url: '',
realm: '',
clientId: ''
};
const keycloakProviderInitConfig = {
onLoad: 'check-sso',
promiseType: 'native',
silentCheckSsoRedirectUri: process.browser
? window.location.origin + '/silent-check-sso.html'
: ''
};

<Component {...pageProps} />

Thanks & regards,
Pratik W.

According to react-keycloak/react-keycloak#94, nextjs package is deprecated and ssr should be used instead. The example under examples/nextjs-app should be updated.

Describe the bug
my keycloak version 10.0.2
all examples hangs with
Request URL: http://localhost:8080/auth/realms/demo/protocol/openid-connect/login-status-iframe.html/init?client_id=demo-backend&origin=http%3A%2F%2Flocalhost%3A3000
Request Method: GET
Status Code: 403 Forbidden

To Reproduce
Steps to reproduce the behavior:

1. Go to 'http://localhost:3000/'
2. Click Login
3. See Loading...
4. Open Network tab, find the issue

Desktop (please complete the following information):

• OS: Ubuntu 19.0.4
• Browser any

Additional context
May be it depends on keycloak settings?
For me they seems right and I can get JWT token with
curl -d "client_id=demo-backend" -d "username=admin" -d "password=admin" -d "grant_type=password" "http://localhost:8080/auth/realms/demo/protocol/openid-connect/token"

In keycloak admin:

Valid Redirect URIs: http://localhost:3000/*
Web Origins: *

Describe the bug
The subproject at examples/react-router fails to compile:

TypeScript error in .../react-keycloak-examples/examples/react-router/src/routes/utils.tsx(7,11):
Interface 'PrivateRouteParams' incorrectly extends interface 'RouteProps<string, { [x: string]: string | undefined; }>'.

To Reproduce
Steps to reproduce the behavior:

1. Clone the project from master Branch
2. Run yarn install (yarn version 1.22.19)
3. Run yarn start
4. See error

Expected behavior
I expected the project to compile without me having to change anything (apart from the keycloak configuration)

Desktop (please complete the following information):

• OS: Linux - Ubuntu 20.04

Additional context

• node -v : v16.17.0