I need some help with keycloak

Tips and tricks
1

@bashir bro can you show me how you did, im still having an issue

2

@AlmondMilk4242 Sure, why not, I will send you the code here, today.

3

@AlmondMilk4242 https://github.com/ugiispoyo/react-keycloak-id/tree/master/examples/with-check-sso

1 Like
4

@bashir love you man, ill check it out

1 Like
5

Screenshot 2023-01-20 at 3.10.21 AM
Screenshot 2023-01-20 at 3.10.21 AM2002×182 43.6 KB

Screenshot 2023-01-20 at 3.10.31 AM
Screenshot 2023-01-20 at 3.10.31 AM995×90 2.97 KB

@bashir not sure where is my issue

6

@bashir got it nice one,i removed the pkce config from keycloak, can you please attach a buy me a coffee in your github for me to make some contribution.

Btw is it possible for you to demonstrate a simple api connection to a backend, either by using http-proxy-middleware or some sort so i can see how the token is being utilized for our future request, since we are not utilizing the defauly adpater that has getToken()

7

import { useReactKeycloackId } from ‘react-keycloak-id’;

and

const { token } = useReactKeycloackId();

all you need is inside the hooks. like authenticated and so on.

8
1 Like
9

Can you please have a look at this

import React, {useState} from 'react';
import { retrieveApi } from '../service/api/Api';
import { useReactKeycloackId } from 'react-keycloak-id';

const ApiPage = () => {
    const [message, setMessage] = useState('');
    const { token } = useReactKeycloackId();
  
    function callApi() {
    
        retrieveApi(token)
          .then((response) => successfulResponse(response))
          .catch((error) => errorResponse(error))
          .finally(() => console.log("cleanup"));
      }
    
      function successfulResponse(response) {
        console.log(response);
        setMessage(response.data.message);
      }
    
      function errorResponse(error) {
        console.log(error);
      }
    
  
    return (
      <div style={{ display: 'block', width: '300px', margin: '100px auto' }}>
         <div>
        <button className="btn btn-success m-5" onClick={callApi}>
          Call Simple Api
        </button>
        <div className="text-info">
        {message}
      </div>
      </div>
        
      </div>
    );
  };
  
  export default ApiPage;

Screenshot 2023-01-20 at 7.33.27 PM
Screenshot 2023-01-20 at 7.33.27 PM2128×452 211 KB

10

what your node version ?

if 16, update it to 18(i.e recommended version)

then everything will work fine.

11

and if you’re using axios, why can’t you create useAxios custom hooks ?

I think that will be better. and use asycn await instead.

1 Like