@slashid/jump-page 0.0.2

package/.turbo/turbo-build.log

@@ -0,0 +1,32 @@
+
+> @slashid/jump-page@0.0.2 build /home/runner/work/javascript/javascript/apps/jump-page
+> astro build
+
+09:03:24 PM [content] No content directory found. Skipping type generation.
+09:03:24 PM [build] output target: static
+09:03:24 PM [build] Collecting build info...
+09:03:24 PM [build] Completed in 371ms.
+09:03:24 PM [build] Building static entrypoints...
+09:03:27 PM [build] Completed in 3.23s.
+
+ building client 
+vite v4.5.0 building for production...
+transforming...
+✓ 377 modules transformed.
+rendering chunks...
+computing gzip size...
+dist/_astro/index.e24832a0.css   31.53 kB │ gzip:  5.44 kB
+dist/_astro/index.03be2d59.js     6.83 kB │ gzip:  2.72 kB
+dist/_astro/client.a5ffbec0.js  135.34 kB │ gzip: 43.73 kB
+dist/_astro/app.16dd2e70.js     166.26 kB │ gzip: 47.25 kB
+✓ built in 3.75s
+Completed in 3.76s.
+
+
+ generating static routes 
+▶ src/pages/index.astro
+  └─ /index.html (+112ms)
+Completed in 124ms.
+
+09:03:31 PM [build] 1 page(s) built in 7.50s
+09:03:31 PM [build] Complete!

package/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["astro-build.astro-vscode"],
+  "unwantedRecommendations": []
+}

package/.vscode/launch.json

@@ -0,0 +1,11 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "command": "./node_modules/.bin/astro dev",
+      "name": "Development server",
+      "request": "launch",
+      "type": "node-terminal"
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @slashid/jump-page
+
+## 0.0.2
+
+### Patch Changes
+
+- c1cf068: Update dependencies
+- Updated dependencies [c1cf068]
+  - @slashid/react-primitives@0.1.0

package/README.md

@@ -0,0 +1,68 @@
+# /id - SDK Jump page
+
+WIP jump page implementation for the SDK. SSG + client side rendering.
+
+## Running the app via CLI
+
+This package comes with CLI support so you can run it locally:
+
+```bash
+npm install -g @slashid/jump-page
+```
+
+### CLI docs
+
+```bash
+Usage: sid-jump-cli serve [options]
+
+Start the development server
+
+Options:
+  -p, --port <number>   Port to use for the development server (default: 4321)
+  -a, --api-url <char>  SlashID API URL (default: "https://api.slashid.com")
+  -s, --sdk-url <char>  SlashID SDK URL (default: "https://cdn.slashid.com/sdk.html")
+  -h, --help            display help for command
+```
+
+## Astro gotchas
+
+### React hydration
+
+Astro renders a static site by default, meaning the even when using React components they won't hydrate out of the box - it is required to explicitly tell Astro which components should be hydrated by [creating an island](https://docs.astro.build/en/concepts/islands/#creating-an-island).
+
+Another gotcha is that when rendering multiple React components from an Astro component, it is not enough to create an island for the parent component, but for each of the children as well. Example:
+
+```jsx
+// Page.astro
+---
+import { Parent, Child } from './components';
+---
+
+<Parent client:load>
+    <Child client:load />
+</Parent>
+```
+
+Notice how the `Child` component also needs the `client:load` attribute. Otherwise it would only be rendered when generating the site.
+
+To prevent issues like these, encapsulate the whole client side app in a single parent component and create an island for it.
+
+```jsx
+// app.tsx
+import { Parent, Child } from "./components";
+
+export function App() {
+  return (
+    <Parent>
+      <Child client:load />
+    </Parent>
+  );
+}
+
+// Page.astro
+---
+import { App } from './app';
+---
+
+<App client:load />
+```

package/astro.config.mjs

@@ -0,0 +1,12 @@
+import { defineConfig } from "astro/config";
+
+import react from "@astrojs/react";
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+
+// https://astro.build/config
+export default defineConfig({
+  integrations: [react()],
+  vite: {
+    plugins: [vanillaExtractPlugin()],
+  },
+});

package/cli.js

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+
+import { program } from "commander";
+import { exec } from "child_process";
+import { createRequire } from "node:module";
+
+const require = createRequire(import.meta.url);
+
+const packageJson = require("./package.json");
+
+program
+  .name("sid-jump-cli")
+  .description("/id CLI - Jump page")
+  .version(packageJson.version);
+
+program
+  .command("serve")
+  .description("Start the development server")
+  .option("-p, --port <number>", "Port to use for the development server", 4321)
+  .option(
+    "-a, --api-url <char>",
+    "SlashID API URL",
+    "https://api.sandbox.slashid.com"
+  )
+  .option(
+    "-s, --sdk-url <char>",
+    "SlashID SDK URL",
+    "https://cdn.sandbox.slashid.com/sdk.html"
+  )
+  .action((options) => {
+    const command = `PUBLIC_SID_SDK_URL=${options.sdkUrl} PUBLIC_SID_API_URL=${options.apiUrl} npm run dev`;
+
+    // Set the required env variables and execute the "dev" script defined in package.json
+    const childProcess = exec(command);
+
+    childProcess.stdout.pipe(process.stdout);
+    childProcess.stderr.pipe(process.stderr);
+
+    childProcess.on("error", (error) => {
+      console.error(`Error: ${error.message}`);
+    });
+
+    childProcess.on("close", (code) => {
+      console.log(`Child process exited with code ${code}`);
+    });
+  });
+
+// Parse the command line arguments
+program.parse();

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@slashid/jump-page",
+  "type": "module",
+  "version": "0.0.2",
+  "private": false,
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "bin": {
+    "sid-jump-cli": "./cli.js"
+  },
+  "dependencies": {
+    "@astrojs/check": "^0.3.1",
+    "@astrojs/react": "^3.0.5",
+    "@sentry/react": "^7.81.1",
+    "@slashid/slashid": "3.16.0",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "astro": "^3.5.5",
+    "commander": "^11.1.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@slashid/react-primitives": "0.1.0"
+  },
+  "devDependencies": {
+    "@vanilla-extract/css": "^1.9.2",
+    "@vanilla-extract/vite-plugin": "^3.9.2"
+  },
+  "scripts": {
+    "dev": "astro dev",
+    "start": "astro dev",
+    "test": "astro check",
+    "build": "astro build",
+    "preview": "astro preview",
+    "astro": "astro"
+  }
+}

package/src/components/README.md

@@ -0,0 +1,3 @@
+# Components
+
+This folder should only contain components meant to render server side and then hydrate on the client side.

package/src/components/app/app.component.tsx

@@ -0,0 +1,83 @@
+import { SlashID } from "@slashid/slashid";
+import * as Sentry from "@sentry/react";
+import {
+  Logo,
+  TextProvider,
+  ThemeRoot,
+  isBrowser,
+} from "@slashid/react-primitives";
+
+import {
+  AppContext,
+  initialAppContextState,
+  type AppState,
+  type AppContextState,
+  type AppReadyState,
+} from "./app.context";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { I18N, detectLanguage } from "../../domain/i18n";
+import { Flow, Error } from "../flow";
+import { Card } from "../card";
+
+import * as styles from "./app.css";
+import { config } from "../../config";
+
+export function App() {
+  const isClientSide = isBrowser();
+  const [appState, setAppState] = useState<AppState>("initial");
+  const sidRef = useRef<SlashID | undefined>(undefined);
+
+  useEffect(() => {
+    if (appState === "initial") {
+      Sentry.init({
+        dsn: "https://6435e8a20ba8b61404fb4621d2aedd4a@o4505317722619904.ingest.sentry.io/4506275681075200",
+      });
+
+      sidRef.current = new SlashID({
+        analyticsEnabled: false,
+        sdkURL: config.sdkURL,
+        baseURL: config.baseURL,
+      });
+
+      setAppState("ready");
+    }
+  }, [appState]);
+
+  const state: AppContextState = useMemo(() => {
+    // checking for hydration makes the first client side render the same as the one on the server side
+    // language check and URL params can only be done on the client side so we need to wait for the first render
+    if (!isClientSide || appState == "initial") {
+      return initialAppContextState;
+    }
+
+    const appReadyState: AppReadyState = {
+      // TODO read customisation props from the URL
+      logo: <Logo />,
+      language: detectLanguage(),
+      state: appState,
+      sdk: sidRef.current as SlashID,
+    };
+
+    return appReadyState;
+  }, [appState, isClientSide]);
+
+  return (
+    <ThemeRoot theme="light">
+      <Sentry.ErrorBoundary
+        fallback={
+          <Card>
+            <Error type="error" />
+          </Card>
+        }
+      >
+        <AppContext.Provider value={state}>
+          <TextProvider text={I18N[state.language]}>
+            <main className={styles.app}>
+              <Flow />
+            </main>
+          </TextProvider>
+        </AppContext.Provider>
+      </Sentry.ErrorBoundary>
+    </ThemeRoot>
+  );
+}

package/src/components/app/app.context.tsx

@@ -0,0 +1,41 @@
+import { createContext, useContext } from "react";
+import { Logo } from "@slashid/react-primitives";
+import type { SlashID } from "@slashid/slashid";
+
+import { type Language } from "../../domain/i18n";
+
+export type AppState = "initial" | "ready";
+
+type AppConfig = {
+  logo: string | React.ReactNode;
+  language: Language;
+};
+
+export type AppInitialState = AppConfig & {
+  state: "initial";
+  sdk: undefined;
+};
+
+export type AppReadyState = AppConfig & {
+  state: "ready";
+  sdk: SlashID;
+};
+
+export type AppContextState = AppInitialState | AppReadyState;
+
+export const initialAppContextState: AppContextState = {
+  logo: <Logo />,
+  language: "en",
+  state: "initial",
+  sdk: undefined,
+};
+
+export const AppContext = createContext<AppContextState>(
+  initialAppContextState
+);
+
+export const useAppContext = () => {
+  const appContext = useContext(AppContext);
+
+  return appContext;
+};

package/src/components/app/app.css.ts

@@ -0,0 +1,15 @@
+import { publicVariables } from "@slashid/react-primitives";
+import { style } from "@vanilla-extract/css";
+
+export const app = style({
+  fontFamily: publicVariables.font.fontFamily,
+  backgroundColor: publicVariables.color.background,
+  boxSizing: "border-box",
+  display: "flex",
+  justifyContent: "center",
+  alignItems: "center",
+  width: "100%",
+  height: "100vh",
+  padding: 0,
+  margin: 0,
+});

package/src/components/app/index.ts

@@ -0,0 +1 @@
+export * from "./app.component";

package/src/components/card/card.component.tsx

@@ -0,0 +1,42 @@
+import { useAppContext } from "../app/app.context";
+import { Text } from "../text";
+import * as styles from "./card.css";
+
+export type Props = {
+  children: React.ReactNode;
+  footer?: React.ReactNode;
+  header?: React.ReactNode;
+};
+
+function DefaultHeader() {
+  const { logo } = useAppContext();
+
+  return <div className={styles.logo}>{logo}</div>;
+}
+
+function DefaultFooter() {
+  return (
+    <Text
+      t="footer.text"
+      variant={{
+        size: "xs",
+        weight: "semibold",
+        color: "placeholder",
+      }}
+    />
+  );
+}
+
+export function Card({
+  children,
+  header = <DefaultHeader />,
+  footer = <DefaultFooter />,
+}: Props) {
+  return (
+    <article className={styles.card}>
+      {header && <header className={styles.header}>{header}</header>}
+      <div>{children}</div>
+      {footer && <footer className={styles.footer}>{footer}</footer>}
+    </article>
+  );
+}

package/src/components/card/card.css.ts

@@ -0,0 +1,39 @@
+import { publicVariables, theme } from "@slashid/react-primitives";
+import { globalStyle, style } from "@vanilla-extract/css";
+
+export const card = style({
+  display: "grid",
+  gridTemplateRows: "auto 1fr auto",
+  backgroundColor: publicVariables.color.panel,
+  width: "100%",
+  minHeight: "100vh",
+  padding: "32px 32px 16px 32px",
+  boxSizing: "border-box",
+
+  "@media": {
+    "screen and (min-width: 768px)": {
+      borderRadius: `calc(2 * ${publicVariables.border.radius})`,
+      width: "465px",
+      minHeight: "330px",
+    },
+  },
+});
+
+export const header = style({
+  marginBottom: theme.space[1],
+});
+
+export const footer = style({
+  width: "100%",
+  textAlign: "center",
+});
+
+export const logo = style({
+  width: 32,
+  height: 32,
+});
+
+globalStyle(`${logo} > svg`, {
+  height: 32,
+  width: 32,
+});

package/src/components/card/index.ts

@@ -0,0 +1 @@
+export * from "./card.component";

package/src/components/flow/flow.component.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import * as Sentry from "@sentry/react";
+import { Card } from "../card";
+import { Initial } from "./flow.initial";
+import { Error } from "./flow.error";
+import type { Challenges, State, FlowType } from "./flow.types";
+import { useAppContext } from "../app/app.context";
+import { Progress } from "./flow.progress";
+import type { ChallengeListInner } from "@slashid/slashid";
+import { Success } from "./flow.success";
+import { ensureError } from "./flow.domain";
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function getFlowTypeFromChallenges(challenges: Challenges): FlowType {
+  // TODO treat passwords as a special case
+  return "catch-all";
+}
+
+export function Flow() {
+  const [flowState, setFlowState] = useState<State>({ state: "initial" });
+  const { sdk, state: appState } = useAppContext();
+
+  useEffect(() => {
+    if (flowState.state !== "initial") return;
+
+    async function processChallenges() {
+      if (!sdk) return;
+      setFlowState({ state: "parsing-url" });
+
+      let challenges: ChallengeListInner[] | null = [];
+
+      try {
+        challenges = await sdk.getChallengesFromURL();
+      } catch (e: unknown) {
+        Sentry.captureException(ensureError(e));
+      }
+
+      if (!challenges) {
+        setFlowState({ state: "no-challenges", challenges: null });
+        return;
+      }
+
+      const flowType = getFlowTypeFromChallenges(challenges);
+
+      setFlowState({ state: "progress", challenges, flowType });
+    }
+
+    processChallenges();
+  }, [appState, flowState.state, sdk]);
+
+  const handleSuccess = () => {
+    if (flowState.state !== "progress") return;
+
+    setFlowState({
+      state: "success",
+      challenges: flowState.challenges,
+      flowType: flowState.flowType,
+    });
+  };
+
+  const handleError = ({ error }: { error: Error }) => {
+    if (flowState.state !== "progress") return;
+
+    setFlowState({
+      state: "error",
+      challenges: flowState.challenges,
+      flowType: flowState.flowType,
+      error,
+    });
+  };
+
+  return (
+    <Card>
+      {(appState !== "ready" || flowState.state === "parsing-url") && (
+        <Initial />
+      )}
+      {appState === "ready" && (
+        <>
+          {flowState.state === "progress" && (
+            <Progress onSuccess={handleSuccess} onError={handleError} />
+          )}
+          {flowState.state === "no-challenges" && <Error type="warning" />}
+          {flowState.state === "success" && <Success />}
+          {flowState.state === "error" && <Error type="error" />}
+        </>
+      )}
+    </Card>
+  );
+}

package/src/components/flow/flow.domain.ts

@@ -0,0 +1,18 @@
+/**
+ * Ensure that a valid Error instance is returned, since in JS you can throw anything.
+ */
+export function ensureError(value: unknown): Error {
+  if (value instanceof Error) return value;
+
+  let stringified = "[Unable to stringify the thrown value]";
+  try {
+    stringified = JSON.stringify(value);
+  } catch {
+    // ignore
+  }
+
+  const error = new Error(
+    `This value was thrown as is, not through an Error: ${stringified}`
+  );
+  return error;
+}

package/src/components/flow/flow.error.tsx

@@ -0,0 +1,32 @@
+import { Circle, Exclamation, Stack } from "@slashid/react-primitives";
+import { Text } from "../text";
+
+export type ErrorType = "warning" | "error";
+
+function ErrorIcon({ type }: { type: ErrorType }) {
+  return (
+    <Circle variant={type === "warning" ? "blue" : "red"} shouldAnimate={false}>
+      <Exclamation />
+    </Circle>
+  );
+}
+
+export function Error({ type }: { type: ErrorType }) {
+  return (
+    <>
+      <Stack space="0.25">
+        <Text
+          as="h1"
+          variant={{ size: "2xl-title", weight: "bold" }}
+          t="error.title"
+        />
+        <Text
+          as="h2"
+          t="error.detail"
+          variant={{ color: "contrast", weight: "semibold" }}
+        />
+      </Stack>
+      <ErrorIcon type={type} />
+    </>
+  );
+}

package/src/components/flow/flow.initial.tsx

@@ -0,0 +1,14 @@
+import { Skeleton, Stack } from "@slashid/react-primitives";
+import { Loader } from "./flow.loader";
+
+export function Initial() {
+  return (
+    <>
+      <Stack space="2">
+        <Skeleton width={"75%"} height={24} />
+        <Skeleton width={"50%"} height={16} />
+      </Stack>
+      <Loader />
+    </>
+  );
+}

package/src/components/flow/flow.loader.tsx

@@ -0,0 +1,9 @@
+import { Circle, Spinner } from "@slashid/react-primitives";
+
+export function Loader() {
+  return (
+    <Circle>
+      <Spinner />
+    </Circle>
+  );
+}

package/src/components/flow/flow.progress.tsx

@@ -0,0 +1,94 @@
+import { Stack } from "@slashid/react-primitives";
+import * as Sentry from "@sentry/react";
+import { Loader } from "./flow.loader";
+import { Text } from "../text";
+import { useEffect } from "react";
+import { useAppContext } from "../app/app.context";
+
+type SlashIDErrorMessage = { message: string };
+class SlashIDError extends Error {
+  errors: SlashIDErrorMessage[];
+
+  constructor(errors: SlashIDErrorMessage[]) {
+    super(errors.length > 0 ? errors[0].message : "Unknown SlashID error");
+    this.errors = errors;
+  }
+}
+
+function isSlashIDError(e: unknown): e is SlashIDError {
+  if (
+    typeof e === "object" &&
+    e !== null &&
+    "errors" in e &&
+    Array.isArray(e.errors)
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+function ensureError(value: unknown): Error {
+  if (value instanceof Error) return value;
+
+  // special case - sometimes the core SDK throws a non-error object
+  if (isSlashIDError(value)) {
+    const error = new SlashIDError(value.errors);
+    return error;
+  }
+
+  let stringified = "[Unable to stringify the thrown value]";
+  try {
+    stringified = JSON.stringify(value);
+  } catch {
+    // ignore
+  }
+
+  const error = new Error(
+    `This value was thrown as is, not through an Error: ${stringified}`
+  );
+  return error;
+}
+
+export type Props = {
+  onSuccess: () => void;
+  onError: ({ error }: { error: Error }) => void;
+};
+
+export function Progress({ onSuccess, onError }: Props) {
+  const { sdk } = useAppContext();
+  useEffect(() => {
+    if (!sdk) return;
+
+    async function authenticate() {
+      try {
+        await sdk?.getUserFromURL();
+        onSuccess();
+      } catch (e: unknown) {
+        const safeError = ensureError(e);
+        Sentry.captureException(safeError);
+        onError({ error: safeError });
+      }
+    }
+
+    authenticate();
+  }, [onError, onSuccess, sdk]);
+
+  return (
+    <>
+      <Stack space="0.25">
+        <Text
+          as="h1"
+          variant={{ size: "2xl-title", weight: "bold" }}
+          t="initial.title"
+        />
+        <Text
+          variant={{ color: "contrast", weight: "semibold" }}
+          as="h2"
+          t="initial.details"
+        />
+      </Stack>
+      <Loader />
+    </>
+  );
+}

package/src/components/flow/flow.success.tsx

@@ -0,0 +1,39 @@
+import { Circle } from "@slashid/react-primitives";
+import { Text } from "../text";
+
+const CheckIcon = () => (
+  <Circle>
+    <svg
+      width="21"
+      height="18"
+      viewBox="0 0 21 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M19.8505 0.705985C20.6342 1.38283 20.7209 2.56684 20.044 3.35055L8.16908 17.1005C7.80192 17.5256 7.2635 17.7637 6.70195 17.7493C6.1404 17.7349 5.61489 17.4695 5.27002 17.0261L0.895049 11.4011C0.259296 10.5837 0.406547 9.4057 1.22394 8.76995C2.04134 8.13419 3.21935 8.28145 3.8551 9.09884L6.82592 12.9185L17.2059 0.89949C17.8828 0.115778 19.0668 0.0291434 19.8505 0.705985Z"
+        fill="white"
+      />
+    </svg>
+  </Circle>
+);
+
+export function Success() {
+  return (
+    <article data-testid="sid-form-success-state">
+      <Text
+        as="h1"
+        t="success.title"
+        variant={{ size: "2xl-title", weight: "bold" }}
+      />
+      <Text
+        as="h2"
+        t="success.details"
+        variant={{ color: "contrast", weight: "semibold" }}
+      />
+      <CheckIcon />
+    </article>
+  );
+}

package/src/components/flow/flow.types.ts

@@ -0,0 +1,48 @@
+import type { SlashID } from "@slashid/slashid";
+
+export type InitialState = {
+  state: "initial";
+};
+
+export type ParsingURLState = {
+  state: "parsing-url";
+};
+
+export type NoChallengesState = {
+  state: "no-challenges";
+  challenges: null;
+};
+
+export type ProgressState = {
+  state: "progress";
+  challenges: Challenges;
+  flowType: FlowType;
+};
+
+export type SuccessState = {
+  state: "success";
+  challenges: Challenges;
+  flowType: FlowType;
+};
+
+export type ErrorState = {
+  state: "error";
+  error: Error;
+  challenges: Challenges;
+  flowType: FlowType;
+};
+
+export type State =
+  | InitialState
+  | ParsingURLState
+  | NoChallengesState
+  | ProgressState
+  | SuccessState
+  | ErrorState;
+
+export type FlowType = "catch-all";
+
+export type ChallengesInURL = Awaited<
+  ReturnType<SlashID["getChallengesFromURL"]>
+>;
+export type Challenges = NonNullable<ChallengesInURL>;

package/src/components/flow/index.ts

@@ -0,0 +1,3 @@
+export * from "./flow.component";
+export * from "./flow.types";
+export * from "./flow.error";

package/src/components/text/index.ts

@@ -0,0 +1 @@
+export * from "./text.component";

package/src/components/text/text.component.tsx

@@ -0,0 +1,8 @@
+import { Text as BaseText, type TextProps } from "@slashid/react-primitives";
+import type { TranslationKeys } from "../../domain/i18n";
+
+type Props = TextProps<Record<TranslationKeys, string>>;
+
+export const Text: React.FC<Props> = (props) => {
+  return <BaseText {...props} />;
+};

package/src/config.ts

@@ -0,0 +1,7 @@
+export const config = {
+  sdkURL:
+    import.meta.env.PUBLIC_SID_SDK_URL ||
+    "https://cdn.sandbox.slashid.com/sdk.html",
+  baseURL:
+    import.meta.env.PUBLIC_SID_API_URL || "https://api.sandbox.slashid.com",
+};

package/src/domain/i18n.ts

@@ -0,0 +1,54 @@
+// based on RFC 5646
+export type Language = "en" | "ja";
+
+/**
+ * Check the language based on the browser settings.
+ * Default to "en"
+ */
+export function detectLanguage(): Language {
+  const language = navigator.language.toLowerCase();
+  if (language === "ja" || language.startsWith("ja-")) {
+    return "ja";
+  }
+
+  return "en";
+}
+
+export const defaultStrings = {
+  "footer.text": "Top-tier security by SlashID",
+  "initial.title": "Logging you in...",
+  "initial.details": "Please follow the on-screen instructions.",
+  "success.title": "Thank you, you're signed in!",
+  "success.details": "You can now close this page.",
+  "error.title": "Something went wrong...",
+  "error.detail": "Please log in again.",
+};
+
+export type TranslationKeys = keyof typeof defaultStrings;
+export type Translations = {
+  [key in Language]: {
+    [key in TranslationKeys]: string;
+  };
+};
+
+export const I18N: Translations = {
+  en: defaultStrings,
+  ja: {
+    "footer.text": defaultStrings["footer.text"],
+    "initial.title": "ログイン処理を行っています。",
+    "initial.details": "処理完了後、画面は自動で切り替わります。",
+    "success.title": "認証が完了しました！",
+    "success.details": "このページを閉じて、元のページへ戻ってください。",
+    "error.title": defaultStrings["error.title"],
+    "error.detail": "再度ログインをしてください。",
+  },
+} as const;
+
+export type TranslationKey = keyof Translations[Language];
+
+export type Translate = (
+  key: TranslationKey
+) => (typeof I18N)[Language][TranslationKey];
+
+export const createI18n = (language: Language) => (key: TranslationKey) =>
+  I18N[language][key];

package/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="astro/client" />

package/src/layouts/README.md

@@ -0,0 +1,3 @@
+# Layouts
+
+This folder should only contain [Astro layouts](https://docs.astro.build/en/core-concepts/layouts/).

package/src/layouts/page.astro

@@ -0,0 +1,33 @@
+---
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+---
+
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
+		<link rel="icon" href="/favicon.png">
+		<title>{title}</title>        
+    </head>
+
+    <body>
+		<slot />
+    </body>
+</html>
+
+<style>
+	body {
+		width: 100%;
+		height: 100vh;
+		margin: 0;
+		padding: 0;
+	}	
+</style>

package/src/pages/index.astro

@@ -0,0 +1,8 @@
+---
+import Page from "../layouts/page.astro";
+import { App } from "../components/app";
+---
+
+<Page title="/id | Jump page">
+    <App client:load/> 
+</Page>

package/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "jsxImportSource": "react"
+  }
+}