Next.js: How do you keep secrets?

[kevinsimper]

If I for example what to use the GIthub API, I don't want to expose my secret? How would I do that?

[ghost]

@kevinsimper you can use Hashicorp Vault to store your secret key.

[kevinsimper]

But I was talking about client/server? How does vault prevent that?

[Atinux]

I think one way of doing it is by setting environment variables.
And then you can use process.env.GITHUB_API_KEY for example (only available from the server side)

[luisrudge]

That won't work either. You need an api to proxy those requests to github.

[mping]

You will need to proxy calls to you server api.

[nkzawa]

environment variables should work.

[416serg]

Would like to reopen this as environment variable will work on the first request, however, navigating using <Link> would make process.env.VAR undefined in the browser.

Any workarounds?

[timneutkens]

@416serg This is the way to go on that :smile: https://github.com/zeit/next.js/tree/master/examples/with-universal-configuration

[416serg]

@timneutkens Thanks Tim!

I've set that up for it to work, which is awesome, however, I still am worried about passing secret keys to it as when I inspect the page with this structure, I still see the key on client.

Example:

env-config.js

const prod = process.env.NODE_ENV === 'production'

module.exports = {
  'API_KEY': prod ? 'companySecret' : 'companySecret'
}

index.js

/* global API_KEY */

import React from 'react'
import { Jumbotron, Button } from 'react-bootstrap'
import Link from 'next/link'
import 'isomorphic-fetch'
import Layout from '../components/layout'
import JobList from '../components/joblist'

export default class HomePage extends React.Component {
  static async getInitialProps () {
    console.log(API_KEY)
    const res = await fetch(`https://api.lever.co/v0/postings/${API_KEY}`)
    const json = await res.json()
    return { jobs: json }
  }

  render () {
    return (
      <Layout title="Careers at ClearCapital">
        <Jumbotron>
          <h1>Work at ClearCapital</h1>
        </Jumbotron>
        <JobList jobs={this.props.jobs} />
      </Layout>
    )
  }
}

Is there anything I can do to avoid exposing the secret key to the client, yet still have the functionality to go back and forth between <Link/>s

Thanks again! 😄

[timneutkens]

@416serg the best thing you can do in that case is move the api call into a microservice and call that microservice. Possibly using https://github.com/zeit/micro 👍

[416serg]

@timneutkens is there an example where I can see how to connect to a micro service from my nextjs app?

[tim-phillips]

@416serg you would simply use fetch as normal

https://github.com/zeit/next.js/tree/master/examples/data-fetch

[mattbrunetti]

@416serg I believe you could use browserify transforms (bpb || inline-process-browser) && unreachable-branch-transform (with transform-loader of course, to adapt them for use with webpack)

[tim-phillips]

@mattbrunetti though that would mean the secret is in the browser. If the browser has the secret, the user has the secret.

[mattbrunetti]

@babenzele The combination is used to strip server-side-only code from your browser build.

source: const secret = process.browser ? 'nope, sorry' : 'I liked The Notebook'
after bpb: const secret = true ? 'nope, sorry' : 'I liked The Notebook'
after unreachable-branch-transform: const secret = 'nope, sorry'

[mattbrunetti]

@babenzele If you're using a a minifier like uglify i guess that would do the job of the second transform