@wasp.sh/wasp-cli-darwin-arm64-unknown 0.20.0

package/data/Generator/templates/sdk/wasp/api/index.ts

@@ -0,0 +1,136 @@
+import axios, { type AxiosInstance, type AxiosError } from 'axios'
+
+import { config } from 'wasp/client'
+import { storage } from 'wasp/core/storage'
+import { apiEventsEmitter } from './events.js'
+
+// PUBLIC API
+export const api: AxiosInstance = axios.create({
+  baseURL: config.apiUrl,
+})
+
+const WASP_APP_AUTH_SESSION_ID_NAME = 'sessionId'
+
+// PRIVATE API (sdk)
+export function setSessionId(sessionId: string): void {
+  storage.set(WASP_APP_AUTH_SESSION_ID_NAME, sessionId)
+  apiEventsEmitter.emit('sessionId.set')
+}
+
+// PRIVATE API (sdk)
+export function getSessionId(): string | null {
+  const sessionId = storage.get(WASP_APP_AUTH_SESSION_ID_NAME) as
+    | string
+    | undefined
+  return sessionId ?? null
+}
+// PRIVATE API (sdk)
+export function clearSessionId(): void {
+  storage.remove(WASP_APP_AUTH_SESSION_ID_NAME)
+  apiEventsEmitter.emit('sessionId.clear')
+}
+
+// PRIVATE API (sdk)
+export function removeLocalUserData(): void {
+  storage.clear()
+  apiEventsEmitter.emit('sessionId.clear')
+}
+
+/**
+ * Axios interceptors for handling authentication
+ *
+ * (1) Request Interceptor:
+ * If a session ID exists, it is added to the request as an `Authorization`
+ * header for the server to use.
+ *
+ * (2) Response Interceptor:
+ * - Catches 401 errors from the server.
+ * - Before clearing the session ID from local storage due to a 401 error,
+ *   it compares the session ID stored in the *failed request's config*
+ *   with the *current* session ID in local storage.
+ * - It only clears the local session ID if the two session IDs match.
+ *
+ * This prevents a race condition like this:
+ * 1. Request A is sent with old session ID X.
+ * 2. User logs out and logs back in, obtaining new session ID Y.
+ * 3. Request A finally fails with a 401 (because ID X is invalid).
+ * Without the check, the interceptor would clear the *current* valid session ID Y.
+ * The check ensures we only clear the session if the *request that failed* used
+ * the *same session ID that's currently stored*.
+ */
+api.interceptors.request.use((config) => {
+  const sessionId = getSessionId()
+  if (sessionId !== null) {
+    config.headers['Authorization'] = `Bearer ${sessionId}`
+  }
+  return config
+})
+
+api.interceptors.response.use(undefined, (error) => {
+  const failingSessionId = getSessionIdFromAuthorizationHeader(error.config.headers['Authorization'])
+  const currentSessionId = getSessionId()
+  if (error.response?.status === 401 && failingSessionId === currentSessionId) {
+    clearSessionId()
+  }
+  return Promise.reject(error)
+})
+
+// This handler will run on other tabs (not the active one calling API functions),
+// and will ensure they know about auth session ID changes.
+// Ref: https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event
+// "Note: This won't work on the same page that is making the changes — it is really a way
+// for other pages on the domain using the storage to sync any changes that are made."
+window.addEventListener('storage', (event) => {
+  if (event.key === storage.getPrefixedKey(WASP_APP_AUTH_SESSION_ID_NAME)) {
+    if (!!event.newValue) {
+      apiEventsEmitter.emit('sessionId.set')
+    } else {
+      apiEventsEmitter.emit('sessionId.clear')
+    }
+  }
+})
+
+// PRIVATE API (sdk)
+/**
+ * Takes an error returned by the app's API (as returned by axios), and transforms into a more
+ * standard format to be further used by the client. It is also assumed that given API
+ * error has been formatted as implemented by HttpError on the server.
+ */
+export function handleApiError<T extends AxiosError<{ message?: string, data?: unknown }>>(error: T): T | WaspHttpError {
+  if (error?.response) {
+    // If error came from HTTP response, we capture most informative message
+    // and also add .statusCode information to it.
+    // If error had JSON response, we assume it is of format { message, data } and
+    // add that info to the error.
+    // TODO: We might want to use HttpError here instead of just Error, since
+    //   HttpError is also used on server to throw errors like these.
+    //   That would require copying HttpError code to web-app also and using it here.
+    const responseJson = error.response?.data
+    const responseStatusCode = error.response.status
+    return new WaspHttpError(responseStatusCode, responseJson?.message ?? error.message, responseJson)
+  } else {
+    // If any other error, we just propagate it.
+    return error
+  }
+}
+
+class WaspHttpError extends Error {
+  statusCode: number
+
+  data: unknown
+
+  constructor (statusCode: number, message: string, data: unknown) {
+    super(message)
+    this.statusCode = statusCode
+    this.data = data
+  }
+}
+
+function getSessionIdFromAuthorizationHeader(header: string | undefined): string | null {
+  const prefix = 'Bearer '
+  if (header && header.startsWith(prefix)) {
+    return header.substring(prefix.length)
+  } else {
+    return null
+  }
+}

package/data/Generator/templates/sdk/wasp/auth/email/actions/login.ts

@@ -0,0 +1,13 @@
+{{={= =}=}}
+import { api, handleApiError } from 'wasp/client/api';
+import { initSession } from '../../helpers/user';
+
+// PUBLIC API
+export async function login(data: { email: string; password: string }): Promise<void> {
+    try {
+        const response = await api.post('{= loginPath =}', data);
+        await initSession(response.data.sessionId);
+    } catch (e) {
+        throw handleApiError(e);
+    }
+}

package/data/Generator/templates/sdk/wasp/auth/email/actions/passwordReset.ts

@@ -0,0 +1,22 @@
+{{={= =}=}}
+import { api, handleApiError } from 'wasp/client/api';
+
+// PUBLIC API
+export async function requestPasswordReset(data: { email: string; }): Promise<{ success: boolean }> {
+    try {
+        const response = await api.post('{= requestPasswordResetPath =}', data);
+        return response.data;
+    } catch (e) {
+        throw handleApiError(e);
+    }
+}
+
+// PUBLIC API
+export async function resetPassword(data: { token: string; password: string; }): Promise<{ success: boolean }> {
+    try {
+        const response = await api.post('{= resetPasswordPath =}', data);
+        return response.data;
+    } catch (e) {
+        throw handleApiError(e);
+    }
+}

package/data/Generator/templates/sdk/wasp/auth/email/actions/signup.ts

@@ -0,0 +1,20 @@
+{{={= =}=}}
+import { api, handleApiError } from 'wasp/client/api';
+{=# emailUserSignupFields.isDefined =}
+import { type UserEmailSignupFields } from '../../providers'
+{=/ emailUserSignupFields.isDefined =}
+
+type EmailSignupData = {
+  email: string
+  password: string
+}{=# emailUserSignupFields.isDefined =} & UserEmailSignupFields{=/ emailUserSignupFields.isDefined =}
+
+// PUBLIC API
+export async function signup(data: EmailSignupData): Promise<{ success: boolean }> {
+  try {
+    const response = await api.post('{= signupPath =}', data);
+    return response.data;
+  } catch (e) {
+    throw handleApiError(e);
+  }
+}

package/data/Generator/templates/sdk/wasp/auth/email/actions/verifyEmail.ts

@@ -0,0 +1,14 @@
+{{={= =}=}}
+import { api, handleApiError } from 'wasp/client/api'
+
+// PUBLIC API
+export async function verifyEmail(data: {
+  token: string
+}): Promise<{ success: boolean; reason?: string }> {
+  try {
+    const response = await api.post('{= verifyEmailPath =}', data)
+    return response.data
+  } catch (e) {
+    throw handleApiError(e)
+  }
+}

package/data/Generator/templates/sdk/wasp/auth/email/index.ts

@@ -0,0 +1,5 @@
+export { login } from './actions/login';
+export { signup } from './actions/signup';
+export { requestPasswordReset } from './actions/passwordReset';
+export { resetPassword } from './actions/passwordReset';
+export { verifyEmail } from './actions/verifyEmail';

package/data/Generator/templates/sdk/wasp/auth/forms/Auth.module.css

@@ -0,0 +1,16 @@
+/*
+  Using !important with some of the components is a workaround for Tailwind
+  CSS's having too much precedence.
+  https://github.com/wasp-lang/wasp/issues/1764
+*/
+
+.container {
+  display: flex;
+  flex-direction: column;
+}
+
+.headerText {
+  font-size: 1.875rem !important;
+  font-weight: 700 !important;
+  margin-top: 1.5rem !important;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/Auth.tsx

@@ -0,0 +1,94 @@
+{{={= =}=}}
+import { useState, createContext, useMemo } from 'react'
+import styles from './Auth.module.css'
+import './internal/auth-styles.css'
+import { tokenObjToCSSVars } from "./internal/util"
+import { CSSProperties } from "react"
+
+import {
+  type State,
+  type CustomizationOptions,
+  type ErrorMessage,
+  type AdditionalSignupFields,
+} from './types'
+import { LoginSignupForm } from './internal/common/LoginSignupForm'
+import { MessageError, MessageSuccess } from './internal/Message'
+{=# isEmailAuthEnabled =}
+import { ForgotPasswordForm } from './internal/email/ForgotPasswordForm'
+import { ResetPasswordForm } from './internal/email/ResetPasswordForm'
+import { VerifyEmailForm } from './internal/email/VerifyEmailForm'
+{=/ isEmailAuthEnabled =}
+
+const logoStyle = {
+  height: '3rem'
+}
+
+
+// PRIVATE API
+export const AuthContext = createContext({
+  isLoading: false,
+  setIsLoading: (isLoading: boolean) => {},
+  setErrorMessage: (errorMessage: ErrorMessage | null) => {},
+  setSuccessMessage: (successMessage: string | null) => {},
+})
+
+function Auth ({ state, appearance, logo, socialLayout = 'horizontal', additionalSignupFields }: {
+    state: State;
+} & CustomizationOptions & {
+  additionalSignupFields?: AdditionalSignupFields;
+}) {
+  const [errorMessage, setErrorMessage] = useState<ErrorMessage | null>(null);
+  const [successMessage, setSuccessMessage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const customStyle = useMemo(() => ({
+    ...tokenObjToCSSVars('color', appearance?.colors ?? {}),
+    ...tokenObjToCSSVars('font-size', appearance?.fontSizes ?? {}),
+  }), [appearance])
+
+  const titles: Record<State, string> = {
+    login: 'Log in to your account',
+    signup: 'Create a new account',
+    {=# isEmailAuthEnabled =}
+    "forgot-password": "Forgot your password?",
+    "reset-password": "Reset your password",
+    "verify-email": "Email verification",
+    {=/ isEmailAuthEnabled =}
+  }
+  const title = titles[state]
+
+  const socialButtonsDirection = socialLayout === 'vertical' ? 'vertical' : 'horizontal'
+
+  return (
+    <div className={styles.container} style={customStyle}>
+      <div>
+        {logo && (<img style={logoStyle} src={logo} alt='Your Company' />)}
+        <h2 className={styles.headerText}>{title}</h2>
+      </div>
+
+      {errorMessage && (
+        <MessageError>
+          {errorMessage.title}{errorMessage.description && ': '}{errorMessage.description}
+        </MessageError>
+      )}
+      {successMessage && <MessageSuccess>{successMessage}</MessageSuccess>}
+      <AuthContext.Provider value={{ isLoading, setIsLoading, setErrorMessage, setSuccessMessage }}>
+        {(state === 'login' || state === 'signup') && (
+          <LoginSignupForm
+            state={state}
+            socialButtonsDirection={socialButtonsDirection}
+            additionalSignupFields={additionalSignupFields}
+          />
+        )}
+        {=# isEmailAuthEnabled =}
+        {state === 'forgot-password' && (<ForgotPasswordForm />)}
+        {state === 'reset-password' && (<ResetPasswordForm />)}
+        {state === 'verify-email' && (<VerifyEmailForm />)}
+        {=/ isEmailAuthEnabled =}
+      </AuthContext.Provider>
+    </div>
+  )
+}
+
+// PRIVATE API
+export default Auth;

package/data/Generator/templates/sdk/wasp/auth/forms/ForgotPassword.tsx

@@ -0,0 +1,18 @@
+import Auth from './Auth'
+import { type CustomizationOptions, State } from './types'
+
+// PUBLIC API
+export function ForgotPasswordForm({
+  appearance,
+  logo,
+  socialLayout,
+}: CustomizationOptions): React.JSX.Element {
+  return (
+    <Auth
+      appearance={appearance}
+      logo={logo}
+      socialLayout={socialLayout}
+      state={State.ForgotPassword}
+    />
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/Login.tsx

@@ -0,0 +1,18 @@
+import Auth from './Auth'
+import { type CustomizationOptions, State } from './types'
+
+// PUBLIC API
+export function LoginForm({
+  appearance,
+  logo,
+  socialLayout,
+}: CustomizationOptions): React.JSX.Element {
+  return (
+    <Auth
+      appearance={appearance}
+      logo={logo}
+      socialLayout={socialLayout}
+      state={State.Login}
+    />
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/ResetPassword.tsx

@@ -0,0 +1,18 @@
+import Auth from './Auth'
+import { type CustomizationOptions, State } from './types'
+
+// PUBLIC API
+export function ResetPasswordForm({
+  appearance,
+  logo,
+  socialLayout,
+}: CustomizationOptions): React.JSX.Element {
+  return (
+    <Auth
+      appearance={appearance}
+      logo={logo}
+      socialLayout={socialLayout}
+      state={State.ResetPassword}
+    />
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/Signup.tsx

@@ -0,0 +1,24 @@
+import Auth from './Auth'
+import {
+  type CustomizationOptions,
+  type AdditionalSignupFields,
+  State,
+} from './types'
+
+// PUBLIC API
+export function SignupForm({
+  appearance,
+  logo,
+  socialLayout,
+  additionalFields,
+}: CustomizationOptions & { additionalFields?: AdditionalSignupFields; }): React.JSX.Element {
+  return (
+    <Auth
+      appearance={appearance}
+      logo={logo}
+      socialLayout={socialLayout}
+      state={State.Signup}
+      additionalSignupFields={additionalFields}
+    />
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/VerifyEmail.tsx

@@ -0,0 +1,18 @@
+import Auth from './Auth'
+import { type CustomizationOptions, State } from './types'
+
+// PUBLIC API
+export function VerifyEmailForm({
+  appearance,
+  logo,
+  socialLayout,
+}: CustomizationOptions): React.JSX.Element {
+  return (
+    <Auth
+      appearance={appearance}
+      logo={logo}
+      socialLayout={socialLayout}
+      state={State.VerifyEmail}
+    />
+  )
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Form.module.css

@@ -0,0 +1,99 @@
+/*
+  Using !important with some of the components is a workaround for Tailwind
+  CSS's having too much precedence.
+  https://github.com/wasp-lang/wasp/issues/1764
+*/
+
+.form {
+  margin-top: 1.5rem;
+}
+
+.formItemGroup {
+  /* Empty class to use as marker */
+}
+
+.formItemGroup + .formItemGroup {
+  margin-top: 1.5rem;
+}
+
+.formLabel {
+  display: block !important;
+  font-size: var(--font-size-sm) !important;
+  font-weight: 500 !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.formInput,
+.formTextarea {
+  display: block !important;
+  line-height: 1.5rem !important;
+  font-size: var(--font-size-sm) !important;
+  border-width: 1px !important;
+  border-color: var(--color-gray600) !important;
+  background-color: #f8f4ff !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  border-radius: 0.375rem !important;
+  width: 100% !important;
+  padding-top: 0.375rem !important;
+  padding-bottom: 0.375rem !important;
+  padding-left: 0.75rem !important;
+  padding-right: 0.75rem !important;
+  margin: 0 !important;
+}
+
+.formInput:focus,
+.formTextarea:focus {
+  border-width: 1px !important;
+  border-color: var(--color-gray700) !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  outline: none;
+}
+
+.formInput:disabled,
+.formTextarea:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  background-color: var(--color-gray400) !important;
+  border-color: var(--color-gray400) !important;
+  color: var(--color-gray500) !important;
+}
+
+.formError {
+  display: block;
+  font-size: var(--font-size-sm);
+  font-weight: 500;
+  color: var(--color-formErrorText);
+  margin-top: 0.5rem;
+}
+
+.submitButton {
+  display: flex !important;
+  justify-content: center !important;
+  width: 100% !important;
+  border-width: 1px !important;
+  border-color: var(--color-brand) !important;
+  background-color: var(--color-brand) !important;
+  color: var(--color-submitButtonText) !important;
+  padding: 0.5rem 0.75rem !important;
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
+  font-weight: 600 !important;
+  font-size: var(--font-size-sm) !important;
+  line-height: 1.25rem !important;
+  border-radius: 0.375rem !important;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
+  transition-duration: 100ms !important;
+  cursor: pointer;
+}
+
+.submitButton:hover {
+  background-color: var(--color-brandAccent) !important;
+  border-color: var(--color-brandAccent) !important;
+}
+
+.submitButton:disabled {
+  opacity: 0.5 !important;
+  cursor: not-allowed !important;
+  background-color: var(--color-gray400) !important;
+  border-color: var(--color-gray400) !important;
+  color: var(--color-gray500) !important;
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Form.tsx

@@ -0,0 +1,74 @@
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import styles from "./Form.module.css";
+import "./auth-styles.css";
+import { clsx } from "./util";
+
+// PRIVATE API
+export const Form = forwardRef<
+  ComponentRef<"form">,
+  ComponentPropsWithoutRef<"form">
+>(({ children, className, ...props }, ref) => (
+  <form className={clsx(styles.form, className)} {...props} ref={ref}>
+    {children}
+  </form>
+));
+
+// PUBLIC API
+export const FormItemGroup = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.formItemGroup, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
+
+// PUBLIC API
+export const FormLabel = forwardRef<
+  ComponentRef<"label">,
+  ComponentPropsWithoutRef<"label">
+>(({ children, className, ...props }, ref) => (
+  <label className={clsx(styles.formLabel, className)} {...props} ref={ref}>
+    {children}
+  </label>
+));
+
+// PUBLIC API
+export const FormInput = forwardRef<
+  ComponentRef<"input">,
+  ComponentPropsWithoutRef<"input">
+>(({ className, ...props }, ref) => (
+  <input className={clsx(styles.formInput, className)} {...props} ref={ref} />
+));
+
+// PUBLIC API)
+export const FormTextarea = forwardRef<
+  ComponentRef<"textarea">,
+  ComponentPropsWithoutRef<"textarea">
+>(({ className, ...props }, ref) => (
+  <textarea
+    className={clsx(styles.formTextarea, className)}
+    {...props}
+    ref={ref}
+  />
+));
+
+// PUBLIC API)
+export const FormError = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.formError, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
+
+// PRIVATE API
+export const SubmitButton = forwardRef<
+  ComponentRef<"button">,
+  ComponentPropsWithoutRef<"button">
+>(({ children, className, ...props }, ref) => (
+  <button className={clsx(styles.submitButton, className)} {...props} ref={ref}>
+    {children}
+  </button>
+));

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Message.module.css

@@ -0,0 +1,22 @@
+.message {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+  background: var(--color-gray400);
+}
+
+.messageError {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+  background: var(--color-errorBackground);
+  color: var(--color-errorText);
+}
+
+.messageSuccess {
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  margin-top: 1rem;
+  background: var(--color-successBackground);
+  color: var(--color-successText);
+}

package/data/Generator/templates/sdk/wasp/auth/forms/internal/Message.tsx

@@ -0,0 +1,34 @@
+import { ComponentPropsWithoutRef, ComponentRef, forwardRef } from "react";
+import styles from "./Message.module.css";
+import "./auth-styles.css";
+import { clsx } from "./util";
+
+// PRIVATE API
+export const Message = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.message, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
+
+// PRIVATE API
+export const MessageError = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.messageError, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));
+
+// PRIVATE API
+export const MessageSuccess = forwardRef<
+  ComponentRef<"div">,
+  ComponentPropsWithoutRef<"div">
+>(({ children, className, ...props }, ref) => (
+  <div className={clsx(styles.messageSuccess, className)} {...props} ref={ref}>
+    {children}
+  </div>
+));