From 3c5a06925bf6a9a1eb169553e9b4b908d3bf64d2 Mon Sep 17 00:00:00 2001
From: se030 <se030.kim@gmail.com>
Date: Mon, 9 Oct 2023 16:22:35 +0900
Subject: [PATCH] Replace default API key with user input

See https://github.com/yorkie-team/yorkie-js-sdk/pull/643#discussion_r1348752785
---
 tools/create-yorkie-app/.env      |  2 +-
 tools/create-yorkie-app/README.md |  6 ++++--
 tools/create-yorkie-app/index.ts  | 31 ++++++++++++++++++++++++++++---
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/tools/create-yorkie-app/.env b/tools/create-yorkie-app/.env
index fc6b0c9c6..f2a7870e4 100644
--- a/tools/create-yorkie-app/.env
+++ b/tools/create-yorkie-app/.env
@@ -1,2 +1,2 @@
 VITE_YORKIE_API_ADDR='https://api.yorkie.dev'
-VITE_YORKIE_API_KEY='ckfvbld047aeajg7f01g'
+VITE_YORKIE_API_KEY=
diff --git a/tools/create-yorkie-app/README.md b/tools/create-yorkie-app/README.md
index ed81ba979..80a9a107b 100644
--- a/tools/create-yorkie-app/README.md
+++ b/tools/create-yorkie-app/README.md
@@ -24,5 +24,7 @@ $ npm run dev
 
 Open the browser and go to the URL that is printed in the terminal.
 
-Note that you are sharing the Yorkie server with other create-yorkie-app users.
-If you want to configure own local Yorkie server, refer to [this README](../../examples/README.md).
+## Note
+
+Yorkie API key or local server is necessary to run each example.
+You can create and manage your projects and API keys at [Yorkie Dashboard](https://yorkie.dev/dashboard). If you want to configure your own server, refer to [this README](../../examples/README.md).
diff --git a/tools/create-yorkie-app/index.ts b/tools/create-yorkie-app/index.ts
index 063340550..97050b1a8 100644
--- a/tools/create-yorkie-app/index.ts
+++ b/tools/create-yorkie-app/index.ts
@@ -111,23 +111,46 @@ const renameFiles: Record<string, string | undefined> = {
   _gitignore: '.gitignore',
 };
 
+const apiKeyMessage = 'You can update your API key in .env';
 const defaultTargetDir = 'yorkie-app';
 
 async function init() {
   const argTargetDir = formatTargetDir(argv._[0]);
   const argTemplate = argv.template || argv.t;
 
+  let apiKey = '';
   let targetDir = argTargetDir || defaultTargetDir;
   const getProjectName = () =>
     targetDir === '.' ? path.basename(path.resolve()) : targetDir;
 
   let result: prompts.Answers<
-    'projectName' | 'overwrite' | 'packageName' | 'framework' | 'variant'
+    | 'apiKey'
+    | 'projectName'
+    | 'overwrite'
+    | 'packageName'
+    | 'framework'
+    | 'variant'
   >;
 
   try {
     result = await prompts(
       [
+        {
+          type: () => {
+            console.log(
+              '\n🔑 To run these examples, you need Yorkie API key.' +
+                '\nGet your API key at https://yorkie.dev/dashboard\n',
+            );
+
+            return 'text';
+          },
+          name: 'apiKey',
+          message: reset('API key:'),
+          initial: apiKeyMessage,
+          onState: ({ value }) => {
+            apiKey = value === apiKeyMessage ? '' : value;
+          },
+        },
         {
           type: argTargetDir ? null : 'text',
           name: 'projectName',
@@ -288,13 +311,15 @@ async function init() {
 
   const files = fs.readdirSync(templateDir);
   for (const file of files.filter(
-    (f) => f !== 'package.json' && f !== '.env',
+    (f) => f !== '.env' && f !== 'package.json',
   )) {
     write(file);
   }
 
   const dotenvPath = path.resolve(fileURLToPath(import.meta.url), '../.env');
-  write('.env', fs.readFileSync(dotenvPath).toString());
+  const dotenvTemplate = fs.readFileSync(dotenvPath).toString();
+
+  write('.env', `${dotenvTemplate.trim()}'${apiKey}'`);
 
   const pkg = JSON.parse(
     fs.readFileSync(path.join(templateDir, `package.json`), 'utf-8'),