@hellocoop/quickstart 2.2.1 → 2.3.2

package/README.md

@@ -1,45 +1,15 @@
 # Hellō Quickstart
 
+This package starts a local web server and launches the Hellō Quickstart Web App to create or retrieve the `client_id` for a Hellō Application.
+
 ## CLI
 
-You can run the following command to create or retrieve the `client_id` for a Hellō Application. 
+If you have Node.js >= v18, you can run Quickstart with: 
 ```sh
 npx @hellocoop/quickstart@latest
 ```
 
-This will open up a browser window, where you will need to login with Hellō, and then choose to create a new app, or return the `client_id`.
-
-### Options
-
-- --provider_hint (-p) - space separated string of provider_hint 
-- --suffix (-x) - suffix to add to generated app name
-- --integration (-i) - integration name shown in console
-- --file (-f) - file to write out HELLO_CLIENT_ID
-- --secret (-s) - boolean to generate a HELLO_COOKIE_SECRET value
-- --wildcard (-w) - boolean to set the wildcard domain Development Redirect URI
-- --debug (-d) - output debug info
-
+This will prompt you to install the package if not already installed. It will then open up a browser window, where you will login with Hellō, and then choose to create a new app, or select an existing one, and then it will return the app's `client_id` to the console.
 
-## Import Package
+[Quickstart CLI and SDK Documentation](https://www.hello.dev/docs/sdks/quickstart)
 
-This package is useful for platform specific installers such as [Hellō Quickstart for Next.js](https://www.npmjs.com/package/@hellocoop/quickstart-nextjs)
-
-To install in another package
-
-```sh
-npm i --save-dev @hellocoop/quickstart
-```
-
-You can then use call Quickstart fom another configuration script
-
-```javascript
-import quickstart from '@hellocoop/quickstart';
-
-...
-const response_uri = 'http://localhost:8080'
-const client_id = await quickstart({
-    response_uri
-})
-
-```
-There are many options that can be passed to Quickstart. See the [Quickstart API](https://www.hello.dev/documentation/management-apis.html#quickstart-api) for details.

package/index.js

@@ -67,8 +67,8 @@ const quickstart = async function (params) {
         const hellooDomain = process.env.HELLO_DOMAIN || 'hello.coop'
         const quickstartURL = `https://quickstart.${hellooDomain}/?${queryString}`
         server.listen(port, host, () => {
-            console.log('\nObtaining a client_id with Hellō Quickstart')
-            console.log("\n",chalk.blueBright(quickstartURL))
+            console.log('\nObtaining a client_id with Hellō Quickstart\n')
+            console.log(chalk.blueBright(quickstartURL))
             const rl = readline.createInterface({
                 input: process.stdin,
                 output: process.stdout

package/next.mjs

@@ -0,0 +1,108 @@
+// next.js quickstart
+
+import semver from 'semver';
+import  { statSync, appendFileSync } from 'fs'
+import chalk from 'chalk';
+import fs from 'fs-extra'
+import 'dotenv/config'
+import quickstart from './index.js';
+import { randomBytes } from 'crypto'
+
+const HELLO_CONFIG_FILE = 'hello.config.js'
+const HELLO_COOP_FILE = 'pages/api/hellocoop.js'
+const ENV_FILE = '.env.local'
+
+// check if @hellocoop/nextjs is installed
+
+
+const writeConfig = async (options) => {
+    const filePath = process.cwd()+'/'+HELLO_CONFIG_FILE
+    try {
+        statSync(filePath);
+        console.error(`${HELLO_CONFIG_FILE} already exists at:\n${filePath}\nSkipping getting client_id`)
+        return
+    } catch (err) {
+        if (err.code !== 'ENOENT') { // file does not exist
+            throw(err)
+        }
+    }
+    // file does not exist - let's get a client_id and write file
+    options.wildcard_domain=true
+    const client_id = await quickstart(options)
+    const config =`// ${HELLO_CONFIG_FILE}
+
+const config = {
+    client_id: '${client_id}',
+}
+export default config
+`
+    fs.outputFileSync( filePath, config)
+    console.log(`created ${filePath} with\nclient_id:${chalk.blueBright(client_id)}`)
+//     console.log(
+// `You can update the:
+//     - Application Logo
+//     - Application Name
+//     - Terms of Service URL
+//     - Privacy Policy URL
+//     - Redirect URIs
+// at the Hellō Developer Console https://console.hello.coop`)
+}
+
+const writeHelloCoop = async () => {
+    const filePath = process.cwd()+'/'+HELLO_COOP_FILE
+    try {
+        statSync(filePath);
+        console.error(`${HELLO_COOP_FILE} already exists at:\n${filePath}\nSkipping creating file`)
+        return
+    } catch (err) {
+        if (err.code !== 'ENOENT') { // file does not exist
+            throw(err)
+        }
+    }
+
+    const content = `// ${HELLO_COOP_FILE}
+
+import config from '../../hello.config.js'
+import { pageAuth } from '@hellocoop/nextjs'
+export default pageAuth(config)
+`
+    fs.outputFileSync( filePath, content )
+}
+
+
+const writeEnvLocal = async () => {
+    const existingSecret = process.env.HELLO_COOKIE_SECRET
+    if (existingSecret) {
+        console.error(`HELLO_COOKIE_SECRET already set to ${existingSecret}`)
+        return
+    } 
+
+    const secret = randomBytes(32).toString('hex')
+    const env = `
+# added by @hellocoop/quickstart --nextjs on ${(new Date()).toISOString()}
+HELLO_COOKIE_SECRET='${secret}'
+`
+    const outputFile = process.cwd()+'/'+ENV_FILE
+    appendFileSync(outputFile,env)
+    console.log(`\nUpdated ${outputFile} with:`)
+    console.log(chalk.blueBright(env))   
+}
+
+const next = async (options) => {
+    try {
+        await writeHelloCoop()
+        await writeEnvLocal()
+        await writeConfig(options)
+    } catch (e) {
+        console.error(e)
+        process.exit(1)
+    }
+}
+
+export default next
+
+
+
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hellocoop/quickstart",
-  "version": "2.2.1",
+  "version": "2.3.2",
   "description": "A CLI and module to start the Hello Quickstart web app and return a client_id",
   "main": "index.js",
   "bin": {
@@ -32,10 +32,11 @@
   "bugs": {
     "url": "https://github.com/hellocoop/packages/issues"
   },
-  "homepage": "https://github.com/hellocoop/packages#readme",
+  "homepage": "https://www.hello.dev/docs/sdk/quickstart",
   "dependencies": {
     "chalk": "^5.3.0",
     "dotenv": "^16.3.1",
+    "fs-extra": "^11.1.1",
     "get-port": "^7.0.0",
     "open": "^9.1.0",
     "semver": "^7.5.4"

package/page.js

@@ -9,55 +9,16 @@ export default function (client_id) {
         <style>
             * { padding: 0; margin: 0; border: none; box-sizing: border-box; }
             html, body { height: 100%; }
-            a { color: inherit;text-decoration: none; }
-            a:hover, a:focus { text-decoration: underline; }
-            a::after {
-                content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="18" style="margin-left: 4px; margin-top: 4px; opacity: 0.8;" fill="none" viewBox="0 0 28 28" stroke="%23303030"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>')
-            }
-            .flash { animation: flash-animation 0.5s ease-in-out; }
-            @keyframes flash-animation {
-                0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; }
-            }
             @media (prefers-color-scheme: dark) {
                 body { background-color: #151515; }
                 body, header, #client-id { color: #d4d4d4 !important; }
-                #client-id { background-color: #303030 !important; }
-                a::after { filter: invert(1); }
             }
         </style>
-        <script>
-            async function copyClientId() {
-                await navigator.clipboard.writeText("${client_id}")
-                //copy flash animation
-                document.querySelector("#client-id").classList.add("flash")
-                setTimeout(() => {
-                    document.querySelector("#client-id").classList.remove("flash")
-                }, 500)
-            }
-        </script>
       </head>
       <body style="display: flex; flex-direction: column; color: #303030; font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;">
-        <header style="background-color: #303030; color: white; height: 48px; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: 600;">Hellō Quickstart Result</header>
+        <header style="background-color: #303030; color: white; height: 48px; display: flex; justify-content: center; align-items: center; font-size: 1.25rem; font-weight: 600;">Hellō Quickstart Complete</header>
         <main style="flex: 1; padding: 24px; display: flex; flex-direction: column; align-items: center;">
-            <div id="client-id-container" style="padding: 0 1rem; display: inline-flex; flex-direction: column; margin-top: 1rem;">
-                <label for="client-id" style="font-size: 14px; font-weight: 500; text-align: left;">Client ID</label>
-                <button id="client-id" onclick="copyClientId()" style="padding: 8px 0; height: auto; margin-top: 4px; text-align: left; border-radius: 6px; padding-left: 12px; padding-right: 12px; display: inline-flex; align-items: center; justify-content: center; background-color: #CBCFD5; color: #303030; font-size: 20px; cursor: pointer;">
-                    <span style="margin-right: 8px; font-family: monospace;">${client_id}</span>
-                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" style="height: 1.25rem; width: 1.25rem" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z"></path></svg>
-                </button>
-            </div>
-            <div style="margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start;">
-                You can update the:
-                <ul style="margin: 10px 0; list-style-position: inside;">
-                    <li>Application Logo</li>
-                    <li>Application Name</li>
-                    <li>Terms of Service URL</li>
-                    <li>Privacy Policy URL</li>
-                    <li>Redirect URIs</li>
-                </ul>
-                <a href="https://console.hello.coop/?client_id=${client_id}" style="font-weight: 500;">at the Hellō Developer Console</a>
-            </div>
-            <p style="margin: 48px 0; font-size: 26px;">You may now close this window.</p>
+            <p style="margin: 48px 0; font-size: 26px;">you may now close this window</p>
         </main>
       </body>
     </html>`

package/quickstart.mjs

@@ -1,6 +1,7 @@
-#!/usr/bin/env node
+// quickstart CLI
+
 import semver from 'semver';
-import * as fs from 'fs'
+import next from './next.mjs'
 
 const requiredVersion = '>=18.3.0';
 
@@ -11,7 +12,6 @@ if (!semver.satisfies(process.versions.node, requiredVersion)) {
 
 // following are in Nodejs 18+
 import { parseArgs } from "node:util";
-import { randomBytes } from 'crypto'
 
 if (!process.stdout.isTTY) {
     const error = new Error('Not running on interactive terminal. Exiting Hellō Quickstart.')
@@ -19,10 +19,13 @@ if (!process.stdout.isTTY) {
     process.exit(1);
 }
 
-const {
-  values: { provider_hint, suffix, file, secret, wildcard, integration, debug },
+let {
+  values: { nextjs, provider_hint, suffix, file, secret, wildcard, integration, debug },
 } = parseArgs({
   options: {
+    nextjs: {
+        type: "boolean"
+    },
     provider_hint: {
         type: "string",
         short: "p",
@@ -38,88 +41,33 @@ const {
         short: "i",
         default: ''
     },
-    file: {
-        type: "string",
-        short: "f",
-    },
-    secret: {
-        type: "boolean",
-        short: "s",
-    },
     wildcard: {
         type: "boolean",
         short: "w",
-    },
-    debug: {
-        type: "boolean",
-        short: "d",
-    },
+    }
   },
 });
 
 import 'dotenv/config'
 import quickstart from './index.js';
 
-const existingClientId = process.env.HELLO_CLIENT_ID
-if (existingClientId) {
-    console.error(`HELLO_CLIENT_ID already set to ${existingClientId}`)
-    process.exit(0);
-} 
-
-if (debug) {
-    console.log('Hellō Quickstart parameters:')
-    if (provider_hint)
-        console.log(`  provider_hint="${provider_hint}"`)
-    if (suffix)
-        console.log(`  suffix="${suffix}"`)
-    if (integration)
-        console.log(`  integration="${integration}"`)
-    if (file)
-        console.log(`  writing output to "${file}"`)
-    console.log(`  generate secret=${secret}`)
-    console.log(`  enable wildcard=${wildcard}\n`);    
-}
-
 (async () => {
 
-    const options = {
-        suffix,
-        provider_hint,
-        wildcard_domain: wildcard,
-        integration
+    if (nextjs) {
+        await next({ provider_hint, suffix, integration })
+        process.exit(0)
     }
 
-    const output = {}
-    try {
-        output.client_id = await quickstart(options)
-    } catch(err) {
-        console.error(err)
-        process.exit(1)
-    }
-    if (secret)
-        output.secret = randomBytes(32).toString('hex')
-
-    if (file) {
-        let helloConfig = `
-# added by @hellocoop/quickstart-nextjs on ${(new Date()).toISOString()}
-HELLO_CLIENT_ID='${output.client_id}'`       
-        if (secret) {
-            helloConfig +=`
-HELLO_COOKIE_SECRET='${output.secret}'
-`
-        }
-        const outputFile = process.cwd()+'/'+file
-
-        try {
-            const err = fs.appendFileSync(outputFile,helloConfig)
-        } catch(err) {
-            console.err(err)
-            process.exit(1)
-        }
-        console.log(`\nUpdated ${outputFile} with:`)
-        console.log(helloConfig+'\n')    
-    } else {
-        console.log(JSON.stringify(output,null,4))
-    }
+    const options = {}
+    if (provider_hint) 
+        options.provider_hint = provider_hint
+    if (suffix) 
+        options.suffix = suffix
+    if (integration) 
+        options.integration = integration
+    if (wildcard) 
+        options.wildcard_domain = wildcard
 
+    const client_id = await quickstart(options)
+    console.log(`client_id=${client_id}`)
 })();