0

I'm trying to make a Keycloak integration with Gatsby.

I'd love to use environment variables for the Keycloak configuration so that I can properly containerize the application. I'm facing an issue about gatsby-browser.js that doesn't get environment variables.

Here's my gatsby-browser.js:

import React from 'react'
import { node } from 'prop-types'
import Keycloak from 'keycloak-js'
import { KeycloakProvider } from '@react-keycloak/web'
import { Spinner } from 'design-react-kit'

require('dotenv').config({
  path: `.env.development`
})

const keycloak = new Keycloak({
  realm: process.env.KEYCLOAK_REALM,
  url: process.env.KEYCLOAK_AUTH_URL,
  clientId: process.env.KEYCLOAK_AUTH_CLIENT_ID
})

const Loading = () => {
  return (
    <div className="container">
      <Spinner
        active
        double
        small={false}
        tag="span"
      />
    </div>
  )
}

const wrapRootElement = ({ element }) => {
  return (
    <KeycloakProvider
      keycloak={keycloak}
      initConfig={{
        promiseType: 'native',
        onLoad: 'check-sso',
        silentCheckSsoRedirectUri:
          window.location.origin + '/silent-check-sso.xhtml'
      }}
      LoadingComponent={<Loading />}
    >
      {element}
    </KeycloakProvider>
  )
}

wrapRootElement.propTypes = {
  element: node
}

const _wrapRootElement = wrapRootElement
export { _wrapRootElement as wrapRootElement }

When I launch gatsby develop I get:

Generating development JavaScript bundle failed

Can't resolve 'fs' in '/home/gbiagini/Documents/work/appaltinnovativi/swg-service/node_modules/dotenv/lib'

If you're trying to use a package make sure that 'fs' is installed. If you're trying to use a local file make sure that the path is correct.

File: node_modules/dotenv/lib/main.js

failed Building development bundle - 13.100s

I don't get why the fs package should be an issue considering that I do the exact same process on gatsby-config.js and works flawlessly.

1
  • At this stage, you are on "client side", so env variables dont exist any more! You must use Gatsby SSR api to pass them Sep 7, 2022 at 23:45

1 Answer 1

0

As you can see in Gatsby's documentation about Environment variables your client-side variables must be prefixed with GATSBY_ to make them available to the client.

Client-side JavaScript

For Project Env Vars that you want to access in client-side browser JavaScript, you can define an environment config file, .env.development and/or .env.production, in your root folder. Depending on your active environment, the correct one will be found and its values embedded as environment variables in the browser JavaScript.

In addition to these Project Environment Variables defined in .env.* files, you could also define OS Env Vars. OS Env Vars which are prefixed with GATSBY_ will become available in browser JavaScript.

So, you will need to prefix your .env variables and update your code:

const keycloak = new Keycloak({
  realm: process.env.GATSBY_KEYCLOAK_REALM,
  url: process.env.GATSBY_KEYCLOAK_AUTH_URL,
  clientId: process.env.GATSBY_KEYCLOAK_AUTH_CLIENT_ID
})
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.