Add Hellō to any Next.js App in seconds

In our mission to reduce developer friction, we looked at what we could do to simplify adding Hellō to your app.

Running the commands below will create a Next.js sample app, add Hellō, and open up a sample page for you to log in -- try it out!

To add Hellō to your app, cd to your project directory, and skip the first two steps.

npx create-next-app@latest nextjs-blog --use-npm --example \
    "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"
cd nextjs-blog
npm i --save @hellocoop/nextjs 
npm i --save-dev @hellocoop/quickstart concurrently wait-on open-cli 
curl -f https://raw.githubusercontent.com/hellocoop/hello.dev/main/samples/nextjs/hello-test.jsx \
    > ./pages/hello-test.jsx
npx @hellocoop/quickstart --nextjs
npx concurrently \
    "PORT=3210 npm run dev" \
    "wait-on http://localhost:3210 && open-cli \"http://localhost:3210/hello-test\""

1. npx create-next-app@latest nextjs-blog --use-npm --example \ "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

   creates a sample Next.js app in the nextjs-blog directory. If you have your own app you want to add Hellō to, you can skip this step.

2. Change to the project directory.

3. npm i --save @hellocoop/nextjs installs all the project packages and the @hellocoop/nextjs package

4. npm i --save-dev @hellocoop/quickstart concurrently wait-on open-cli installs npm CLI packages for this demo. See below for how they are used.

5. curl ... > ./pages/hello-test.jsx copies a test file from the hello.dev docs

6. npx @hellocoop/quickstart --nextjs will:

   1. start a local webserver and prompt to open a browser;

   2. you will then log in to Hellō and be prompted on what to name your application or select an existing application;

   3. The client_id for the application will be returned and written to the hello.config.js file in the root of your project; and

   4. a HELLO_COOKIE_SECRET will be generated and written to .env.local

7. npm run dev will start your server, wait-on will wait for it to start, and thenopen-cli will load the test file.

Note that we are not React or Next.js experts! We are identity and security experts. Any feedback or suggestions on improving our React and Next.js packages would be appreciated!