reactjs - Redirect from keycloak to https instead of http on localhost - Stack Overflow

I have protected route component with redirection to authorization via keycloak service. On local i work with vite and proxy to api server.

I have auth endpoint from backend: http://localhost:3000/api/v3/auth/request?development_mode=1&redirect_to='http://localhost:3000/'

When i use this endpoint, its redirected me to keycloak service and after successfully authorization should return me back.

link from keycloak: ;response_type=code&redirect_uri=http://localhost:3000/api/v3/auth/callback&scope=email&state=%7B%27development_mode%27:%201,%20%27redirect_to%27:%20%27;nonce=

But the main problem is in protocols. My localhost working on http, but kecloak return me to https://localhost:3000

And a have error - This site can’t provide a secure connection localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR

PS: i was trying to use https on local via 'vite-plugin-mkcert', but after running local server i get error: 'This page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE'

It's so messy for me and a can't fugure out when whose side is the problem frontend or backend

 export const ProtectedRoute = ({ children }) => {
const [cookies] = useCookies(['access_token'])
const currentUrl = encodeURIComponent(window.location.href)

if (!cookies.access_token) {
    window.location.href = `http://localhost:3000/api/v3/auth/request?redirect_to=${currentUrl}&development_mode=1`
}

return children }

I have protected route component with redirection to authorization via keycloak service. On local i work with vite and proxy to api server.

I have auth endpoint from backend: http://localhost:3000/api/v3/auth/request?development_mode=1&redirect_to='http://localhost:3000/'

When i use this endpoint, its redirected me to keycloak service and after successfully authorization should return me back.

link from keycloak: https://keycloak.biacorp.ru/realms/aps/protocol/openid-connect/auth?client_id=aps-back-dev&response_type=code&redirect_uri=http://localhost:3000/api/v3/auth/callback&scope=email&state=%7B%27development_mode%27:%201,%20%27redirect_to%27:%20%27http://aps-dev.biacorp.ru%27%7D&nonce=

But the main problem is in protocols. My localhost working on http, but kecloak return me to https://localhost:3000

And a have error - This site can’t provide a secure connection localhost sent an invalid response. ERR_SSL_PROTOCOL_ERROR

PS: i was trying to use https on local via 'vite-plugin-mkcert', but after running local server i get error: 'This page isn’t working localhost didn’t send any data. ERR_EMPTY_RESPONSE'

It's so messy for me and a can't fugure out when whose side is the problem frontend or backend

 export const ProtectedRoute = ({ children }) => {
const [cookies] = useCookies(['access_token'])
const currentUrl = encodeURIComponent(window.location.href)

if (!cookies.access_token) {
    window.location.href = `http://localhost:3000/api/v3/auth/request?redirect_to=${currentUrl}&development_mode=1`
}

return children }

• reactjs
• localhost
• keycloak

Share Improve this question Follow edited Feb 4 at 14:36 David Abramov asked Feb 4 at 14:11 David AbramovDavid Abramov 5377 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Problem solved by switch localhost on https

And one more important thing: if you using vite-plugin-mkcert you should add mkcert() to plugins at vite.config:

import mkcert from 'vite-plugin-mkcert'

export default defineConfig(() => {
return {
      plugins:[mkcert()]
      server: {
        https:true,
      }