DEV Community: Diego Castillo

Simple Next.js Magic Link JWT Authentication with Prisma, PostgreSQL, and Resend

Diego Castillo — Mon, 07 Oct 2024 19:37:55 +0000

When building web applications, authentication is almost always a core requirement. I needed something simple and secure that would let me get started quickly on new projects without over-complicating the setup. My goal was to have a solution that's easy to implement, handles email verification out of the box, and just works. In this post, I'm sharing how to build a straightforward magic link authentication system using Next.js, Auth.js, Prisma, PostgreSQL, and Resend. It's a powerful yet simple solution that accomplishes exactly what I needed, and I hope it'll be useful for your projects too.

You can find the starter kit, which implements the setup described in this blog post, in the following GitHub repository.

Getting Started

Installing Dependencies

To get started, initialize a new Next.js app:

npx create-next-app@latest

For this setup, I've configured the new app named nextjs-magic-link-auth to use TypeScript, ESLint, Tailwind, a /src directory, the App Router, and a custom import alias @/* for cleaner imports.

Prisma Setup

The next step is to set up the Prisma ORM and connect it to the database. I've chosen PostgreSQL for its strong support for relational data, ease of integration with Prisma, and reliability for production use.

cd nextjs-magic-link-auth
yarn add @prisma/client
yarn add prisma --dev

Once Prisma is installed, initialize it and create a schema.prisma file by running:

yarn prisma init

Next, set up the DATABASE_URL in your .env file (i.e., touch .env). Make sure to replace <username>, <password>, and <db_name> with your actual database credentials:

DATABASE_URL="postgresql://<username>:<password>@localhost:5432/<db_name>?schema=public"

Now, update the schema.prisma file to define the tables and columns needed for email magic link authentication. For this example, I've only added the essentials, but you might want to refer to the Auth.js Prisma documentation to tailor it to your needs.

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  emailVerified DateTime? @map("email_verified")
  createdAt     DateTime  @default(now()) @map("created_at")
  updatedAt     DateTime? @updatedAt @map("updated_at")

  @@index([email])
  @@map("users")
}

model VerificationToken {
  id         String    @id @default(cuid())
  identifier String
  token      String    @unique
  expires    DateTime
  createdAt  DateTime  @default(now()) @map("created_at")
  updatedAt  DateTime? @updatedAt @map("updated_at")

  @@unique([identifier, token])
  @@map("verification_tokens")
}

After updating the schema.prisma file, run the following commands to create the migration and apply the changes to your database. This ensures that your schema is correctly set up:

yarn prisma migrate dev --name init

The migrate dev command will create a new migration file in the prisma/migrations directory, allowing you to track changes to your schema over time.

Once the migration is complete, create a new file called prisma.ts in your src/lib directory to configure the Prisma client:

mkdir src/lib
touch src/lib/prisma.ts

Add the following code to prisma.ts:

import { PrismaClient } from "@prisma/client";

const globalForPrisma = globalThis as unknown as { prisma: PrismaClient };

export const prisma = globalForPrisma.prisma || new PrismaClient();

if (process.env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;

The code creates a single instance of PrismaClient and attaches it to the global object when not in production to avoid multiple client instances during development. In production, the client is not stored on the global object (globalForPrisma), meaning each module that imports prisma will use a fresh instance from new PrismaClient().

Configure the Resend Provider with Prisma

Once Prisma is set up, it's time to integrate it with Resend. If you don't have a Resend account yet, start by creating one and generating an API key. Save this API key in your .env file as AUTH_RESEND_KEY:

AUTH_RESEND_KEY=<your-resend-api-key>

Next, install Auth.js and its Prisma adapter by running:

yarn add next-auth@beta @auth/prisma-adapter

After installing these dependencies, add the AUTH_SECRET environment variable to your .env file. You can generate a random secret by running:

openssl rand -base64 32

This AUTH_SECRET is used by Auth.js to encrypt tokens and email verification hashes securely.

Now, it's time to set up the Auth.js configuration. Create a folder and file to hold the configuration:

mkdir src/lib/auth
touch src/lib/auth/index.ts

Fill in src/lib/auth/index.ts with the following content:

import NextAuth from "next-auth";
import type { NextAuthConfig } from "next-auth";
import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "@/lib/prisma";
import Resend from "next-auth/providers/resend";

export const authOptions: NextAuthConfig = {
  adapter: PrismaAdapter(prisma),
  providers: [
    Resend({
      from: "onboarding@resend.dev",
    }),
  ],
  session: {
    strategy: "jwt",
  },
};

export const { handlers, auth, signIn, signOut } = NextAuth(authOptions);

Next, add the route handler for Auth.js under src/app/api/auth/[...nextauth]/route.ts:

mkdir -p src/app/api/auth/\[...nextauth\]
touch src/app/api/auth/\[...nextauth\]/route.ts

Fill it in with the following content:

import { handlers } from "@/lib/auth";

export const { GET, POST } = handlers;

And that's it! Run yarn dev, then head over to http://localhost:3000/api/auth/signin to sign in using your email. Check your inbox for the sign-in email, click on the link provided, and you'll be signed in.

I've also included a GitHub repository that showcases the implementation of this setup.

Conclusion and Further Improvements

This simple magic link authentication system with Next.js, Prisma, and Resend provides a solid foundation for secure and easy-to-implement authentication. To further enhance this setup, consider the following improvements:

Secure sensitive routes using Next.js middleware to prevent unauthorized access (read more here).
Log emails to the console locally instead of sending them in a development environment to avoid unnecessary Resend API calls:

  return Resend({
    from: "onboarding@resend.dev",,
    // Send email verification requests to the console in development to avoid
    // spamming the Resend API
    ...(process.env.NODE_ENV === "development"
      ? {
          sendVerificationRequest: async ({ identifier, url, provider }) => {
            const { host } = new URL(url);
            console.log(`
----------------------------------
From: ${provider.from}
To: ${identifier}
Subject: Sign in to ${host}

Sign in URL:

${url}
----------------------------------
  `);
          },
        }
      : {}),
  });

Implement rate limiting to prevent potential abuse by limiting the number of sign-in requests within a specified timeframe (read more here).

These additions will help make the authentication flow more robust and production-ready while maintaining a simple codebase.

Scroll to Input on Formik Failed Submission

Diego Castillo — Sat, 27 Nov 2021 02:07:08 +0000

Formik is a well known React library that allows to create forms, manage, and validate their state. It comes with built-in support for Yup, a schema builder for value parsing and validation.

The FieldArrray helper is one of my favorite Formik features. It enables the manipulation of lists with ease. One caveat, is that these type of forms usually become long, to the point where all its inputs are not necessarily visible in the window.

And what if the user made a mistake on a field? Which field was it? Is that field currently visible to the user? The goal of this blog post is to showcase a solution which automatically scrolls an input into the visible area of the window, so that users know which input in the form is invalid.

Formik Errors

When combined with Yup, Formik will automatically transform validation errors into an object whose properties match its values. For instance, given a form has the following initial values and validation schema:

const initialValues = {
  friends: [{ name: "", email: "" }],
}

const schema = Yup.object().shape({
  friends: Yup.array(
    Yup.object().shape({
      name: Yup.string().required("Required"),
      email: Yup.string().email("Invalid email").required("Required"),
    })
  )
    .min(1)
    .required(),
})

An invalid form submission, where the first "friend" input doesn't have a name, and the second one has an invalid email, will look as follows:

const errors = {
  friends: [{ name: "Required" }, { email: "Invalid email" }],
}

We can take advantage of this error formatting, in combination with Formik's fields' name usage of object dot-notation (e.g., <Field name={`friends[${index}].name`} />) to reference nested values, and find an invalid input in the DOM.

Scroll To Field Error

The first step is to transform a Formik error object to dot-notation, so that we can later on search for inputs by their unique name.

The getFieldErrorNames() function takes a Formik error as an argument, and returns an array of error field names using object dot-notation for array fields. For instance, given the error object from above, it'll return ['friends.0.name', 'friends.1.email'], meaning that these attributes at that index have a validation error.

export const getFieldErrorNames = formikErrors => {
  const transformObjectToDotNotation = (obj, prefix = "", result = []) => {
    Object.keys(obj).forEach(key => {
      const value = obj[key]
      if (!value) return

      const nextKey = prefix ? `${prefix}.${key}` : key
      if (typeof value === "object") {
        transformObjectToDotNotation(value, nextKey, result)
      } else {
        result.push(nextKey)
      }
    })

    return result
  }

  return transformObjectToDotNotation(formikErrors)
}

Next up, getFieldErrorNames() needs to be executed when a user submits the form with invalid data. Unfortunately, Formik doesn't (yet) provide a sort of callback for a client-side failed submission, thus what we'll be doing instead, is listening to submitCount changes, and executing our custom logic to scroll to an invalid input there.

The <ScrollToFieldError/> component listens to submitCount changes, and calls getFieldErrorNames() when the form is invalid. If getFieldErrorNames() returns any field error names, it'll query the first element by name, and scroll it into visible area of the window.

export const ScrollToFieldError = () => {
  const { submitCount, isValid, errors } = useFormikContext()

  useEffect(() => {
    if (isValid) return

    const fieldErrorNames = getFieldErrorNames(errors)
    if (fieldErrorNames.length <= 0) return

    const element = document.querySelector(
      `input[name='${fieldErrorNames[0]}']`
    )
    if (!element) return

    // Scroll to first known error into view
    element.scrollIntoView({ behavior: "smooth", block: "center" })
  }, [submitCount]) // eslint-disable-line react-hooks/exhaustive-deps

  return null
}

And that's it! The <ScrollToFieldError/> component can be used within a Formik form (so that it has access to Formik's context), and whenever an invalid form submission occurs, it'll automatically scroll the first invalid input into the visible area of the window.

A live demo is available in this CodeSandbox, and all the code required for it in GitHub.

Email and Password Based Authentication with Expo and Firebase Part 3: Sign In, Forgot Password, and Update Password

Diego Castillo — Sun, 19 Sep 2021 21:41:46 +0000

This is part 3/3 of a series of blog posts that showcase email and password based authentication using Expo and Firebase.
- Part 1: Project Setup
- Part 2: Sign Up, Email Verification, and Sign Out
- Part 3: Sign In, Forgot Password, and Update Password (you are here)

This is the last part of a series of blog posts covering how to setup email and password based authentication with Expo and Firebase. In this blog post, we'll finish off by implementing the sign in, forgot password, and update password features. Let's get started!

Sign In

You should now be quite familiar with how each feature is implemented. Let's start by first adding the signIn() method in the user API, which uses the Firebase's signInWithEmailAndPassword() method.

export const signIn = ({ email = '', password = '' }) =>
  firebase.auth().signInWithEmailAndPassword(email, password)

Next, create the "sign in" feature folder and a /hooks directory on it mkdir -p src/features/sign-in/hooks. Create the useSignIn() hook touch src/features/sign-in/hooks/use-sign-in.js and add its implementation. The useSignIn() hook works just like the others; it allows access to Firebase's "sign in" API and exposes an isLoading and error state.

export const useSignIn = () => {
  const [state, setState] = useState({
    isLoading: false,
    error: null,
  })

  const handleSignIn = async (values) => {
    setState({ isLoading: true, error: null })

    try {
      await signIn(values)
      setState({ isLoading: false, error: null })
    } catch (error) {
      setState({ isLoading: false, error })
    }
  }

  return [handleSignIn, { ...state }]
}

Following that, create the /screens directory mkdir src/features/sign-in/screens and the "sign in" screen touch src/features/sign-in/screens/SignInScreen.js. The "sign in" screen re-uses the <EmailAndPasswordForm/>, extending it to optionally support a custom submit button text. Note that if any error occurs, it'll be rendered using the <ErrorMessage/> component (full source code), which simply uses the <Alert/> component from native-base.

export const SignInScreen = () => {
  const [signIn, { isLoading, error }] = useSignIn()

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <ErrorMessage error={error} />
        <EmailAndPasswordForm
          onSubmit={signIn}
          isLoading={isLoading}
          buttonText="Sign in"
        />
      </VStack>
    </Center>
  )
}

Finally, define the "sign in" screen in the guest navigator.

export const GuestAppNavigator = () => (
  <Stack.Navigator>
    {/* guest welcome and sign up screens omitted for brevity */}
    <Stack.Screen
      name="SignIn"
      component={SignInScreen}
      options={{ title: 'Sign In' }}
    />
  </Stack.Navigator>
)

Start the application and verify you are able to sign in with an existing user account. If the user's email is unverified, they should be shown the "verify email" screen, otherwise, the home screen should be shown.

Forgot Password

The forgot password feature will help users recover their account if they forget their password. To do so, users will specify their email so that Firebase can send a "reset password" link.

Let's start by creating the API for sending a password reset email. Create the sendPasswordReset() method in the user API file.

export const sendPasswordReset = ({ email = '' }) =>
  firebase.auth().sendPasswordResetEmail(email)

Next, create the forgot password feature directory mkdir -p src/features/forgot-password/hooks and the usePasswordReset() hook file touch src/features/forgot-password/hooks/use-password-reset.js. Similar to all others hooks created in the series, the usePasswordReset() hook calls the user API method and keeps track of its isLoading/error states.

export const usePasswordReset = () => {
  const [state, setState] = useState({
    isLoading: false,
    error: null,
  })

  const handlePasswordReset = async (values) => {
    setState({ isLoading: true, error: null })

    try {
      await sendPasswordReset(values)
      setState({ isLoading: false, error: null })
    } catch (error) {
      setState({ isLoading: false, error })
      throw error
    }
  }

  return [handlePasswordReset, { ...state }]
}

Following that, extend the sign in screen with a button which will redirect users to the yet to be created forgot password screen.

export const SignInScreen = ({ navigation }) => {
  const handlePressOnForgotPassword = () => {
    navigation.navigate('ForgotPassword')
  }

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        {/* Existing code omitted for brevity */}
        <Button onPress={handlePressOnForgotPassword}>Forgot password</Button>
      </VStack>
    </Center>
  )
}

Make sure the forgot password screen is defined in the guest navigator stack.

export const GuestAppNavigator = () => (
  <Stack.Navigator>
    {/* Existing screens omitted for brevity */}
    <Stack.Screen
      name="ForgotPassword"
      component={ForgotPasswordScreen}
      options={{ title: 'Forgot Password' }}
    />
  </Stack.Navigator>
)

The forgot password screen uses an <EmailForm/> component (full source code here) which defines an email input and a submit button that needs to be connected with the usePasswordReset() hook. Create the forgot password screen directory mkdir src/features/forgot-password/screens and a file for it touch src/features/forgot-password/screens/ForgotPasswordScreen.js and fill it in.

export const ForgotPasswordScreen = ({ navigation }) => {
  const [sendPasswordReset, { isLoading, error }] = usePasswordReset()

  const handlePasswordReset = async (values) => {
    try {
      await sendPasswordReset(values)
      navigation.navigate('SignIn')
    } catch (err) {
      console.error(err.message)
    }
  }

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <Text>
          Please, enter your email address. You will receive link to create a new
          password via email.
        </Text>
        <ErrorMessage error={error} />
        <EmailForm onSubmit={handlePasswordReset} isLoading={isLoading} />
      </VStack>
    </Center>
  )
}

Users should now be able to reset their password by entering their email in the form, and using the reset password link sent to them via email.

Update Password

The update password feature allows users to change their password. To do so, users will first need to re-authenticate so that the currently signed in user can verify they are indeed the ones who want to perform the change, and only then, they will be allowed to update their password.

Start by adding a button in the home screen which redirects to the yet to be defined re-authenticate screen.

export const HomeScreen = ({ navigation }) => {
  const handlePressOnUpdatePassword = () => {
    navigation.navigate('Reauthenticate')
  }

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <Button onPress={handlePressOnUpdatePassword}>Update password</Button>
        {/* Existing code omitted for brevitiy */}
      </VStack>
    </Center>
  )
}

Next, add the re-authenticate screen to the verified app navigator.

export const VerifiedAppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Reauthenticate"
      component={ReauthenticateScreen}
      options={{ title: 'Sign in' }}
    />
    {/* Existing code omitted for brevitiy */}
  </Stack.Navigator>
)

Following that, create the update password feature directory by running mkdir -p src/features/update-password/screens and the re-authenticate screen with touch src/features/update-password/screens/ReauthenticateScreen.js. In order to re-authenticate a user, create the reauthenticate method in the user API file, which uses Firebase's reauthenticateWithCredential method.

export const reauthenticate = ({ email = '', password = '' }) =>
  getUser().reauthenticateWithCredential(
    firebase.auth.EmailAuthProvider.credential(email, password)
  )

Once the API method has been defined, proceed to create the useReauthenticate() hook to easily access it by running mkdir -p src/features/update-password/hooks and touch src/features/update-password/hooks/use-reauthenticate.js. Notice how it re-throws the error if an exception is raised while performing the operation.

export const useReauthenticate = () => {
  const [state, setState] = useState({
    isLoading: false,
    error: null,
  })

  const handleReauthenticate = async (values) => {
    setState({ isLoading: true, error: null })

    try {
      await reauthenticate(values)
      setState({ isLoading: false, error: null })
    } catch (error) {
      setState({ isLoading: false, error })
      throw error
    }
  }

  return [handleReauthenticate, { ...state }]
}

Finally, use the useReauthenticate() hook in the re-authenticate screen, which works quite similar to the sign in screen, but instead re-authenticates a user. If a user is successfully re-authenticated, they are redirected to the update password screen.

export const ReauthenticateScreen = ({ navigation }) => {
  const [reauthenticate, { isLoading, error }] = useReauthenticate()

  const handleReauthenticate = async (values) => {
    try {
      await reauthenticate(values)
      navigation.navigate('UpdatePassword')
    } catch (err) {
      console.error(err.message)
    }
  }

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <ErrorMessage error={error} />
        <EmailAndPasswordForm
          onSubmit={handleReauthenticate}
          isLoading={isLoading}
          buttonText="Re-authenticate"
        />
      </VStack>
    </Center>
  )
}

So far, users should be able to click on "Update password" in the home screen, re-authenticate their account in the re-authenticate screen, and if successful, be redirected to the update password screen.

In order to allow a user to update their password once successfully re-authenticated, let's define the API method that will be used to do so. In the user API file, define the updatePassword() method.

export const updatePassword = ({ password = '' }) =>
  getUser().updatePassword(password)

Next, create a hook for it touch src/features/update-password/hooks/use-update-password.js

export const useUpdatePassword = () => {
  const [state, setState] = useState({
    isLoading: false,
    error: null,
  })

  const handleUpdatePassword = async (values) => {
    setState({ isLoading: true, error: null })

    try {
      await updatePassword(values)
      setState({ isLoading: false, error: null })
    } catch (error) {
      setState({ isLoading: false, error })
      throw error
    }
  }

  return [handleUpdatePassword, { ...state }]
}

Following that, create the update password screen within the update password feature directory touch src/features/update-password/screens/UpdatePasswordScreen.js. The update password screen will render the <UpdatePasswordForm/> (full source code) and use the useUpdatePassword() hook to set the new user password, and if successful, redirect to the top of the navigation stack (home screen).

export const UpdatePasswordScreen = ({ navigation }) => {
  const [updatePassword, { isLoading, error }] = useUpdatePassword()

  const handleUpdatePassword = async (values) => {
    try {
      await updatePassword(values)
      navigation.popToTop()
    } catch (err) {
      console.error(err.message)
    }
  }

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <ErrorMessage error={error} />
        <UpdatePasswordForm
          onSubmit={handleUpdatePassword}
          isLoading={isLoading}
        />
      </VStack>
    </Center>
  )
}

Finally, add the update password screen to the verified app navigator.

export const VerifiedAppNavigator = () => (
  <Stack.Navigator>
    {/* Existing code omitted for brevitiy */}
    <Stack.Screen
      name="UpdatePassword"
      component={UpdatePasswordScreen}
      options={{ title: 'Update Password' }}
    />
  </Stack.Navigator>
)

And that's it! Once re-authenticated, users of the application can now update their password.

Conclusion

This was the last part of a series of blog posts covering how to setup email and password based authentication with Expo and Firebase. The developed app supports sign up, sign in, sign out, email verification, forgot password, and update password. If you have any questions, feel free to post a question or comment down below, or simply open up an issue in the project's GitHub repository; I'll be happy to help with any concerns 🙂.

Email and Password Based Authentication with Expo and Firebase Part 2: Sign up, Email Verification, and Sign Out

Diego Castillo — Fri, 10 Sep 2021 16:17:33 +0000

This is part 2/3 of a series of blog posts that showcase email and password based authentication using Expo and Firebase.
- Part 1: Project Setup
- Part 2: Sign Up, Email Verification, and Sign Out (you are here)
- Part 3: Sign In, Forgot Password, and Update Password

The previous part of this series, covered how to setup Expo and Firebase, with the aim of creating an authentication flow. That being done, it's time to start implementing the authentication features. In this blog post, I'll cover how to create the sign up, email verification, and sign out features.

Navigation

The app navigation will be configured based on the current user authentication status. This means there's going to be a guest, unverified, and verified navigator. Let's start with the guest navigator, which will render when a user hasn't been authenticated.

First, create the App.js file by running touch src/App.js and update src/Root.js so that it renders it.

const Root = () => (
  <NativeBaseProvider>
    <App /> {/* Render the <App/> component */}
    <StatusBar style="auto" />
  </NativeBaseProvider>
)

Before creating the guest navigator, there are a few react-navigation dependencies that need to be installed. Run the following commands to set these up, and make sure Root.js is wrapped by the <NavigationContainer/> component.

npm install @react-navigation/stack
expo install react-native-gesture-handler

Next, add the guest navigator by first creating a new directory mkdir src/navigation , and the guest navigator component touch src/navigation/GuestAppNavigator.js. The guest navigator is a stack navigator, and for now, it will only render the guest welcome screen.

export const GuestAppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="GuestWelcome"
      component={GuestWelcomeScreen}
      options={{ title: 'Welcome' }}
    />
  </Stack.Navigator>
)

Finally, create the guest welcome screen component by running mkdir -p src/features/guest-welcome/screens and touch src/features/guest-welcome/screens/GuestWelcomeScreen.js. The guest welcome screen will render a button to sign in, and another one to sign up. These buttons will navigate users to the appropriate stack screen.

export const GuestWelcomeScreen = ({ navigation }) => {
  const handlePressOnSignIn = () => {
    navigation.navigate('SignIn') 
  }

  const handlePressOnSignUp = () => {
    navigation.navigate('SignUp')
  }

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center">
        <Center>
          <Button onPress={handlePressOnSignIn}>Sign in</Button>
        </Center>
        <Center>
          <Button onPress={handlePressOnSignUp}>Create account</Button>
        </Center>
      </VStack>
    </Center>
  )
}

Sign Up

The sign up feature allows a user to create an account by entering an email and a password. To do so, let's first start by creating a form which will ask the user for their email, password, and a password confirmation. The password confirmation is optional, since the same form will be used later on to create the "Sign In" flow, in which case it isn't needed.

To being with, create the /components directory by running mkdir -p src/components and the email and password form touch src/components/EmailAndPasswordForm.js. The full code for the <EmailAndPasswordForm/> component can be found in the Github repository, but I'll highlight some of the important bits here.

The email and password form component uses Formik and Yup. The component validates the presence of a valid email and a password input. The password must be at least 6 characters, and if the option for password confirmation is enabled, then both the password and passwordConfirmation inputs must match.

const buildValidationSchema = (withPasswordConfirmation) =>
  Yup.object({
    email: Yup.string().email().required(),
    password: Yup.string().required().min(6),
    // Optionally require password confirmation
    ...(withPasswordConfirmation && {
      passwordConfirmation: Yup.string()
        .oneOf([Yup.ref('password'), null])
        .required(),
    }),
  })

Next, let's create the sign up screen, which will render the form. Create a new directory for the sign up feature mkdir -p src/features/sign-up/screens and the screen component touch src/features/sign-up/screens/SignUpScreen.js. Momentarily, use placeholders for the onSubmit and isLoading form props.

export const SignUpScreen = () => {
  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <EmailAndPasswordForm
          onSubmit={() => {}} 
          isLoading={false}
          withPasswordConfirmation={true}
        />
      </VStack>
    </Center>
  )
}

Now that the sign up screen has been defined, it can be added to the guest navigator stack.

export const GuestAppNavigator = () => (
  <Stack.Navigator>
    {/* Guest welcome screen omitted for brevity */}
    <Stack.Screen
      name="SignUp"
      component={SignUpScreen}
      options={{ title: 'Create Account' }}
    />
  </Stack.Navigator>
)

It's now time to interact with Firebase and start defining the authentication API. First, create a user API file by running touch src/api/user.js, and define the signUp method. This file will encapsulate all the required user authentication methods, so that components don't directly interact with Firebase.

export const signUp = async ({ email = '', password = '' }) => {
  return firebase.auth().createUserWithEmailAndPassword(email, password)
}

Next, let's create a hook within the sign up feature that exposes the sign up functionality. Create a /hooks directory within the sign up feature mkdir src/features/sign-up/hooks and the useSignUp() hook touch src/features/sign-up/hooks/use-sign-up.js. This hook encapsulates access to the user API, and exposes the isLoading and error states.

export const useSignUp = () => {
  const [state, setState] = useState({
    isLoading: false,
    error: null,
  })

  const handleSignUp = async (values) => {
    setState({ isLoading: true, error: null })

    try {
      await signUp(values)
      setState({ isLoading: false, error: null })
    } catch (error) {
      setState({ isLoading: false, error })
    }
  }

  return [handleSignUp, { ...state }]
}

Finally, use the useSignUp() hook in the sign up screen by passing the signUp method to the form onSubmit prop, as well as isLoading.

export const SignUpScreen = () => {
  const [signUp, { isLoading, error }] = useSignUp()

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        {error && (
          <Alert status="error">
            <Alert.Icon />
            <Alert.Title>{error.message}</Alert.Title>
          </Alert>
        )}
        <EmailAndPasswordForm
          onSubmit={signUp}
          isLoading={isLoading}
          withPasswordConfirmation={true}
        />
      </VStack>
    </Center>
  )
}

By now, you should be able to access the application, navigate to the sign up screen, create a valid account, and verify in Firebase the account was created. To verify the user account was created, navigate to the Firebase console, click on the "Authentication" menu item, and confirm the user account is shown in the table.

Email Verification

Once a user account has been created, users will be shown another screen where they will be asked to verify their email. To keep track of the current user authentication status, let's create a user context. To do so, we'll use Firebase's onAuthStateChanged() method.

In the user API, define the onAuthStateChanged() method:

export const onAuthStateChanged = (args) => 
  firebase.auth().onAuthStateChanged(args)

Next, create a context directory by running mkdir src/context and the user context file touch src/context/UserContext.js. The user's context will use the onAuthStateChanged() listener to update its internal state, and set/unset the Firebase user accordingly. Additionally, it will define a helper method which allows to "reload" the current user.

export const UserContextProvider = ({
  children,
  initialState = { user: null, isLoading: true, error: null },
}) => {
  const [state, setState] = useState(initialState)

  // Listen to Firebase authentication state changes
  useEffect(() => {
    const unsubscribe = onAuthStateChanged((user) => {
      setState({ user, isLoading: false, error: null })
    })

    return () => {
      unsubscribe()
    }
  }, [])

  const handleReload = async () => {
    try {
      await reload()
      const user = getUser()
      setState({ user, isLoading: false, error: null })
    } catch (error) {
      setState({ user: null, isLoading: false, error })
    }
  }

  const value = {
    ...state,
    reload: handleReload,
  }

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>
}

Finally, make sure the <Root/> component is wrapped by <UserContextProvider/>, and use the context in the <App/> component, where the guest or unverified navigators can be conditionally rendered depending on the authentication status.

export const App = () => {
  const { user, isLoading } = useUserContext()

  if (isLoading)
    return (
      <Center flex={1} accessibilityLabel="Loading user profile...">
        <Spinner />
      </Center>
    )

  if (user) return <UnverifiedAppNavigator />

  return <GuestAppNavigator />
}

The unverified navigator is shown to users who are authenticated, but haven't verified their email yet. To create it, run touch src/navigation/UnverifiedAppNavigator.js and define a new screen called "verify email" screen.

export const UnverifiedAppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="VerifyEmail"
      component={VerifyEmailScreen}
      options={{ title: 'Verify Email' }}
    />
  </Stack.Navigator>
)

The "verify email" screen will allow users to perform three actions:

Done: reload the current user (this is needed to update the current user and confirm if their email has been verified or not).
Resend: send the verification email again.
Cancel: sign out the current user.

Each of these actions requires a new method to be defined in the user API:

export const reload = () => firebase.auth().currentUser.reload()

export const sendVerification = () =>
  firebase.auth().currentUser.sendEmailVerification()

export const signOut = () => firebase.auth().signOut()

Once the API methods have been defined, create a folder for the feature by running mkdir -p src/features/email-verification/screens and the "verify email" screen verification/screens/VerifyEmailScreen.js.

Except for the "Done" action in the "verify email" screen, all will follow a similar pattern: a hook will be created for it, the hook will call a method in the user API, and expose the state and result to consumers. For brevity, I'll only explain how the "Resend" action works. The remaining actions (i.e., "Done" — useUserContext(), and "Cancel" — useSignOut()) are available in the Github repository.

Start by creating a /hooks directory mkdir -p src/features/email-verification/hooks and the useSendVerification() hook touch src/features/email-verification/hooks/use-send-verification.js. The useSendVerification() hook sends the verification email again using the corresponding user API method.

export const useSendVerification = () => {
  const [state, setState] = useState({
    isLoading: false,
    error: null,
  })

  const handleSendVerification = async () => {
    setState({ isLoading: true, error: null })

    try {
      await sendVerification()
      setState({ isLoading: false, error: null })
    } catch (error) {
      setState({ isLoading: false, error })
    }
  }

  return [handleSendVerification, { ...state }]
}

Next, use the hook in the "verify email" screen, so that the email is sent again when the "Resend" button is pressed.

export const VerifyEmailScreen = () => {
  const [sendVerification, { isLoading }] = useReloadUser()

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <Heading>Check your email</Heading>
        <Text>
          We sent you an email with instructions on how to verify your email
          address. Click on the link in the email to get started.
        </Text>
        {/* Other buttons omitted for brevity */}
        <Button onPress={sendVerification} isLoading={isLoading}>
          Resend
        </Button>
      </VStack>
    </Center>
  )
}

And that's it! When a user verifies their email, they can click on "Done", which will update their authentication state. Alternatively, the user can click on "Resend" to send the verification email again, or "Cancel" to sign out.

Sign Out

Now that users can create an account and verify their email, it's time to create the verified navigator.

Start by updating the <App/> component so that it renders the verified navigator when a user is authenticated and verified.

export const App = () => {
  const { user, isLoading } = useUserContext()

  if (isLoading)
    return (
      <Center flex={1} accessibilityLabel="Loading user profile...">
        <Spinner />
      </Center>
    )

  // User is authenticated and verified
  if (user && user.emailVerified) return <VerifiedAppNavigator />

  // User is authenticated, but their email hasn't been verified
  if (user) return <UnverifiedAppNavigator />

  return <GuestAppNavigator />
}

Next, create the verified navigator by running touch src/navigation/VerifiedAppNavigator.js, and add the home screen to it.

export const VerifiedAppNavigator = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="Home"
      component={HomeScreen}
      options={{ title: 'Home' }}
    />
  </Stack.Navigator>
)

Finally, create the home screen by running mkdir -p src/features/home/screens and touch src/features/home/screens/HomeScreen.js. For simplicity, the home screen only renders a welcome message, and allows users to sign out. Notice the sign out functionality uses the useSignOut() hook, just like the "verify email" screen does.

export const HomeScreen = () => {
  const { user } = useUserContext()
  const [signOut, { isLoading }] = useSignOut()

  return (
    <Center flex={1}>
      <VStack space={4} alignItems="center" w="90%">
        <Heading>Hello, {user.email}.</Heading>
        <Button onPress={signOut} isLoading={isLoading}>
          Sign out
        </Button>
      </VStack>
    </Center>
  )
}

Conclusion

It's a wrap, folks! We've covered quite some ground, and by now the app allows users to sign up, verify their email, and sign out. As always, remember to checkout the Github repository, where all the code is available. In the next and last part of the series, we'll finish up by implementing sign in, forgot password, and the update password features.

Email and Password Based Authentication with Expo and Firebase Part 1: Project Setup

Diego Castillo — Sun, 29 Aug 2021 14:29:33 +0000

This is part 1/3 of a series of blog posts that showcase email and password based authentication using Expo and Firebase.
- Part 1: Project Setup (you are here)
- Part 2: Sign Up, Email Verification, and Sign Out
- Part 3: Sign In, Forgot Password, and Update Password

For a while now, I've been using Firebase as my go-to tool to quickly setup an email and password based authentication flow when working with Expo. While there are many other solutions out there, I've yet to find one that allows me to get started so quickly as Firebase does.

The goal of this series of blog posts, is to provide a simple example of how to setup Expo and Firebase with email and password based authentication. When done, this app will support sign up, sign in, sign out, email verification, forgot password, and update password. All the code for this series of blog posts is available on this Github repository. Let's jump right in.

Create a New Expo App

If not done already, install the Expo CLI by running npm install --global expo-cli so that the application can be created. Next, create a new application by running expo init --npm and select the blank template. The application can now be served with npm start and opened locally or in the device/simulator of your preference. For simplicity, I'll be running it through React Native for web, which works out of the box with the Expo SDK. To do so, simply press w in the terminal that's running the Expo CLI.

Expo CLI options to open an app.

Assuming everything went smoothly, the newly created Expo app should now be accessible via a web browser in http://localhost:19006/, where it should display a familiar welcome message.

Create a Firebase Project

Navigate to your Firebase account and create a new project. Once the project is created, click in the sidebar "Authentication" menu item, and enable the "Email/Password" provider.

"Email/Password" Firebase authentication provider enabled.

Next, go to the project settings and register a web app for the project.

Select the web app platform to register the web app.

Finally, add the Firebase SDK to the web app (this configuration will later on be used to initialize the Firebase app in the Expo project).

Firebase SDK configuration example.

Configure Expo and Firebase

It's time to use the Firebase project configuration in the Expo app. To do so, first install the Firebase SDK by running expo install firebase. Additionally, install react-native-dotenv by running npm install react-native-dotenv, so that environment variables can be imported in the app via an .env file. Next, add the module:react-native-dotenv plugin to the default Expo babel.config.js file.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      ['module:react-native-dotenv'], // Add this
    ],
  };
};

babel.config.js configuration file.

Create an .env file in the root directory of the project by running touch .env, and fill it in with the correct Firebase SDK configuration details. I've prefixed them with FIREBASE_ so that it's clear what these are for.

FIREBASE_API_KEY=
FIREBASE_AUTH_DOMAIN=
FIREBASE_PROJECT_ID=
FIREBASE_STORAGE_BUCKET=
FIREBASE_MESSAGING_SENDER_ID=
FIREBASE_APP_ID=

Example of an .env file. Fill it in with the Firebase SDK web app project configuration.

Create the app's API directory by running mkdir -p src/api and an index file within it with touch src/api/index.js. This is where the Firebase app will be initialized. To do so, use the environment variables.

import firebase from 'firebase';
import {
  FIREBASE_API_KEY,
  FIREBASE_AUTH_DOMAIN,
  FIREBASE_PROJECT_ID,
  FIREBASE_STORAGE_BUCKET,
  FIREBASE_MESSAGING_SENDER_ID,
  FIREBASE_APP_ID,
} from '@env'

const firebaseConfig = {
  apiKey: FIREBASE_API_KEY,
  authDomain: FIREBASE_AUTH_DOMAIN,
  projectId: FIREBASE_PROJECT_ID,
  storageBucket: FIREBASE_STORAGE_BUCKET,
  messagingSenderId: FIREBASE_MESSAGING_SENDER_ID,
  appId: FIREBASE_APP_ID,
};

firebase.initializeApp(firebaseConfig);

Finally, import this file in App.js (located in the root directory):

import './src/api'; // Import the Firebase API configuration file
import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// Rest of the file omitted...

Application Structure and Dependencies

To simplify the application, I'll be using the following libraries (installation instructions are outlined below each of them). Note that none of these libraries are technically required, but they will simplify getting up and running.

NativeBase: mobile-first, accessible components for React Native & Web.

npm install native-base styled-components styled-system
expo install react-native-svg
expo install react-native-safe-area-context

Formik: create forms, manage, and validate their state.
```
npm install formik
```
Yup: schema builder for value parsing and validation (which integrates nicely with Formik).
```
npm install yup
```

React Navigation: routing and navigation for Expo and React Native apps.

npm install @react-navigation/native
expo install react-native-screens react-native-safe-area-context

Let's now create the "application structure". The application structure will use a "feature-based" approach, where each feature (i.e., sign up, email verification, etc) will be contained within a directory.

src/
  Root.js
  api/ # API-only methods (Firebase)
  components/ # Re-usable components (among many features)
  features/
    sign-up/
      components/ # Components used by the sign-up feature only
      screens/ # Container type component(s) which setup layout/structure and higher level logic

The first step is to create the Root.js file. To do so, copy App.js by running cp App.js src/Root.js, then remove App.js (rm App.js), and update the package.json file so that main points to src/Root.js:

"main": "src/Root.js"

Next, replace the contents of Root.js so that it imports the Firebase API, setup the native-base provider, and register the root Expo component.

import './api';
import { registerRootComponent } from 'expo';
import React from 'react';
import { StatusBar } from 'expo-status-bar';
import { NativeBaseProvider, Box } from 'native-base';

const Root = () => (
  <NativeBaseProvider>
    <Box>Hello world</Box>
    <StatusBar style="auto" />
  </NativeBaseProvider>
);

registerRootComponent(Root);

Start the Expo server once again by running npm start and make sure the "Hello world" message is correctly shown.

Re-cap

In this blog post, we've gone over setting up Expo and Firebase together with the goal of implementing an email and password based authentication system. Additionally, a common set of libraries were installed and setup to make it easier to implement the upcoming features the app will need. In the next blog post, we'll implement the sign up, email verification, and sign out features.

Create a Simple React Timer Component ⌛

Diego Castillo — Sun, 18 Oct 2020 20:53:29 +0000

I have recently been developing a workout application during my spare time. One of the requirements I set for it was to create a timer so that users could keep track of their workouts. The primary goal was to build a timer which featured a way to "play", "pause", and "stop" a workout. Additionally, it would need to store enough information so that questions such as "How much time did the user take to complete the exercise?" or "How much time did it take to complete the entire workout?" could be answered.

In this blog post, I will explain a simple implementation of a timer component in React that can be extended to answer the aforementioned questions. At the end, there are links to a CodeSandbox demo and the GitHub repository of the code.

The Plan 💡

The main idea was to create an entity which would allow to store all the information that is needed. This entity would store when it started, paused, and for how much time it ran. Let's call this entity a "time entry" and define it as follows:

{
  startedAt: Integer, // The # of elapsed ms since the unix epoch
  elapsedMs: Integer // If paused, the # of ms this time entry ran
}

A workout would then be defined as a list of time entries. In other words, each time the user started the timer, it would initialize a time entry and set startedAt to "now". It would keep running unless paused, in which case the number of elapsed milliseconds since it was started would be computed and stored in elaspedMs. If the timer is started again, then a new time entry would be created. Finally, computing the total elapsed time would simply require adding up all the time entries' elapsedMs .

The Timer Reducer ⚒️

Let's go ahead and implement it using CRA to simplify the process. Run npx create-react-app react-timer-app to create the application.

I'll be using the "State Reducer Pattern" as explained by Kent C. Dodds. Let's start by defining a simple skeleton of the timer reducer, the actions the user will be allowed to perform, and the useTimer hook in App.js as follows:

const actionTypes = {
  tick: 'tick',
  play: 'play',
  pause: 'pause',
  stop: 'stop',
}

const initialState = {
  tick: null,
  timeEntries: [],
}

const timerReducer = (state, { type, payload }) => {
  switch (type) {
    case actionTypes.tick:
      return state
    case actionTypes.play:
      return state
    case actionTypes.pause:
      return state
    case actionTypes.stop:
      return state
    default:
      throw new Error(`Unhandled type: ${type}`)
  }
}

const useTimer = () => {
  const [state, dispatch] = useReducer(timerReducer, initialState)

  return {}
}

const Timer = () => {
  return null
}

const App = () => {
  return <Timer />
}

The `tick` Action

The tick action will be used to re-render the <Timer/> component every second. To do this, the component will use the useInterval hook as implemented by Dan Abramov in this blog post . Every second, this action will be fired with "now" (the number of milliseconds since the unix epoch) as its payload. The payload is then assigned to the tick property of the timer reducer's state.

case actionTypes.tick:
  return { ...state, tick: payload }

// The number of ms since the unix epoch (a.k.a. "now")
const now = () => new Date().getTime()

const useTimer = () => {
  const [state, dispatch] = useReducer(timerReducer, initialState)

  const tick = () => dispatch({ type: actionTypes.tick, payload: now() })

  return {
    tick,
  }
}

const Timer = () => {
  const { tick } = useTimer()

  useInterval(() => {
    tick()
  }, 1000)

  return null
}

The `play` Action

The play action is in charge of starting the timer at "now". Before implementing this action, there are a few utility functions that will need to be defined, though.

First, let's add these functions which will make it easier to deal with a time entry. These will help to create, stop, and easily determine a time entry's "status":

// Create a new time entry starting "now" by default
const startTimeEntry = (time = now()) => ({
  startedAt: time,
  elapsedMs: null,
})

// Stop the given time entry at "now" by default
const stopTimeEntry = (timeEntry, time = now()) => ({
  ...timeEntry,
  elapsedMs: time - timeEntry.startedAt,
})

// Return true if a time entry is running, false otherwise
const isTimeEntryRunning = ({ elapsedMs }) => elapsedMs === null

// Return true if a time entry is paused, false otherwise
const isTimeEntryPaused = ({ elapsedMs }) => elapsedMs !== null

Next, let's define some more utility functions, but this time to help derive information from the useTimer hook state (a.k.a. "selectors"):

// Get the current time entry, which is always the latest one
const getCurrTimeEntry = (state) =>
  state.timeEntries[state.timeEntries.length - 1]

// Return true if the timer is stopped, false otherwise
const isStopped = (state) => state.timeEntries.length === 0

// Return true if the timer is running, false otherwise
const isRunning = (state) =>
  state.timeEntries.length > 0 && isTimeEntryRunning(getCurrTimeEntry(state))

// Return true if the timer is paused, false otherwise
const isPaused = (state) =>
  state.timeEntries.length > 0 && isTimeEntryPaused(getCurrTimeEntry(state))

// Return the total number of elapsed ms
const getElapsedMs = (state) => {
  if (isStopped(state)) return 0

  return state.timeEntries.reduce(
    (acc, timeEntry) =>
      isTimeEntryPaused(timeEntry)
        ? acc + timeEntry.elapsedMs
        : acc + (now() - timeEntry.startedAt),
    0
  )
}

These methods will make it easy to know what is the current time entry, if the timer is running, paused, or stopped, and how much time has passed since it was started.

Alright, those were a lot of utility functions! Let's focus in the play action implementation:

case actionTypes.play:
  if (isRunning(state)) return state

  return {
    ...state,
    timeEntries: state.timeEntries.concat(startTimeEntry(payload)),
  }

The play action can only be executed if the timer isn't currently running, thus the state is returned as it's unless that's the case. Otherwise, a new time entry is "started" (created) and added to the list of time entries.

The `pause` Action

The pause action can only be executed if timer is running. It will find the currently running time entry (the last one), and compute the number of elapsed milliseconds since it started until now (i.e., how much time it ran for). Here's the implementation:

case actionTypes.pause:
  if (isStopped(state)) return state
  if (isPaused(state)) return state

  const currTimeEntry = getCurrTimeEntry(state)
  return {
    ...state,
    timeEntries: state.timeEntries
      .slice(0, -1)
      .concat(stopTimeEntry(currTimeEntry)),
  }

The `stop` Action

The stop action removes all the existing time entries to stop the timer and can be executed at any time. Its implementation is straightforward:

case actionTypes.stop:
  return { ...state, timeEntries: [] }

The `useTimer` Hook

Now that the timer reducer has been implemented, the useTimer hook will expose its API to consumers as follows:

const useTimer = () => {
  const [state, dispatch] = useReducer(timerReducer, initialState)

  const pause = () => dispatch({ type: actionTypes.pause, payload: now() })
  const play = () => dispatch({ type: actionTypes.play, payload: now() })
  const stop = () => dispatch({ type: actionTypes.stop })
  const tick = () => dispatch({ type: actionTypes.tick, payload: now() })

  const running = isRunning(state)
  const elapsedMs = getElapsedMs(state)

  return {
    pause,
    play,
    running,
    stop,
    tick,
    elapsedMs,
  }
}

The useTimer consumer is the <Timer/> component, and its implementation could look like this (very simplified and with no styles whatsoever for brevity):

const Timer = () => {
  const { pause, play, running, stop, tick, elapsedMs } = useTimer()

  const zeroPad = (x) => (x > 9 ? x : `0${x}`)
  const seconds = Math.floor((elapsedMs / 1000) % 60)
  const minutes = Math.floor((elapsedMs / (1000 * 60)) % 60)
  const hours = Math.floor((elapsedMs / (1000 * 60 * 60)) % 24)

  useInterval(() => {
    tick()
  }, 1000)

  return (
    <div>
      <p>
        {zeroPad(hours)}:{zeroPad(minutes)}:{zeroPad(seconds)}
      </p>
      {running ? (
        <button onClick={pause}>pause</button>
      ) : (
        <button onClick={play}>play</button>
      )}
      <button onClick={stop}>stop</button>
    </div>
  )
}

Conclusion 🤝

Alright, that was a bit longer than I anticipated. The idea of using time entries to store the timer's state can be extended to include more information in each time entry, and thus be able to answer questions such as the ones I posted in the introduction. There's a CodeSandbox demo of the <Timer/> component and also a GitHub repo with all the code needed. Post a comment below if you have a question or idea to share 🙂.

Using Postgres Enum Type in Rails

Diego Castillo — Mon, 19 Aug 2019 13:45:35 +0000

Last week I wrote Using Active Support Concerns to Encapsulate Data Access and Validation, where I explained how to use Active Support concerns to define data access and validation rules for an Active Record enum attribute. The attribute mapped values to integers in the database, similar to this example:

class Project < ActiveRecord::Base
  enum status: [ :active, :archived ]
  validates :status, inclusion: { in: statuses.keys }
end

Depending on the problem that you are trying to solve, this approach could potentially lead to several drawbacks including:

Meaningless integer values stored in the database.
Unless the integer value is "limited" in a migration, Active Model validations can be by-passed through plain SQL, effectively allowing the attribute to be set to any integer.
Plain SQL queries need to use the integer value, not the Active Record enum.

In this blog post, I'll show how to use the Postgres enum type with Rails to avoid the aforementioned pit falls.

Postgres Enumerated Types

Postgres supports enumerated types, which are data types that comprise a static, ordered set of values. To create an enum type, use the Postgres CREATE TYPE command. In a Rails project, generate a migration as follows rails g migration AddStatusToProjects:

class AddStatusToProjects < ActiveRecord::Migration[5.2]
  def up
    execute <<-SQL
      CREATE TYPE project_status AS ENUM ('active', 'archived');
    SQL
    add_column :projects, :status, :project_status
  end

  def down
    remove_column :projects, :status
    execute <<-SQL
      DROP TYPE project_status;
    SQL
  end
end

The migration creates a project_status enumerated type. Next, it adds a status column to the projects table of type project_status. By using the Postgres enumerated type, the status attribute is constrain at the database level to be one of active|archived. Lastly, set config.active_record.schema_format = :sql in the environment configuration files, so that the database schema includes the project_status enumerated type definition.

Active Record Enum

The initial definition of the status Active Record enum needs to be slightly modified. Simply use a hash to explicitly map the relation between the attribute and database value as follows:

class Project < ActiveRecord::Base
  enum status: { active: 'active', archived: 'archived' }
  validates :status, inclusion: { in: statuses.keys }
end

Unit Tests

Unit tests can be tremendously simplified by using the shoulda-matchers gem:

RSpec.describe Project, type: :model do

  it { should define_enum_for(:status).
      with_values(
        active: 'active',
        archived: 'archived'
      ).backed_by_column_of_type(:enum) }

  it { should allow_values(:active, :archived).for(:status) }
end

The first unit test verifies the status column is defined in the Project model and its column type is enum. Also, it makes sure the status enum values are correctly defined as specified in the status hash. Finally, the last test confirms the Project model allows the status attribute to be set using the :active and :archived symbols.

Conclusion

And that was it! The Project model defines and validates an enum for the status attribute which is mapped to meaningful string values in the database. Additionally, the status column is constrain at the database level to be one of the specified values in the Postgres enumerated type.

If you are interested in learning more about enum in Rails, I highly recommend reading Ruby on Rails - how to create perfect enum in 5 steps. This blog post, written by Błażej Pichur, has been a fantastic guide during the past few weeks to improve my understanding and usage of enum in Rails.

Using Active Support Concerns to Encapsulate Data Access and Validation

Diego Castillo — Mon, 12 Aug 2019 12:56:05 +0000

Recently, I had to implement a feature that introduced the concept of currency to an API. Users of the API could create different type of resources, and each of these resources needed to know the type of currency being used. For instance, a user could create a Payment in USD, or request a Withdrawal in AUD.

In this short blog post, my goal is to explain how I used ActiveSupport::Concern to encapsulate and group together all data access and validation of the currency attribute in a single place.

The Gist

I wanted currency to be an enum where each value was a currency code. Using enum allows to write queries by name, such as Payment.first.currency.GBP? or Payment.where(currency: :AUD). If such logic was only needed in a single model, I would have probably done the following:

class Payment < ApplicationRecord
  enum currency: { USD: 0, AUD: 1, GBP: 2 }
  validates :currency, inclusion: { in: currencies.keys }
end

Nonetheless, the same notion of currency needed to exist in multiple models. To solve this, I chose to use ActiveSupport::Concern in order to DRY the models and group related concerns of logic together. As described by DHH in this blog post in 2012, ActiveSupport::Concern "encapsulate[s] both data access and domain logic about a certain slice of responsibility."

The Solution

To implement the desired solution, I created a Currency module in app/models/concerns/currency.rb as follows:

module Currency
  extend ActiveSupport::Concern
  include ActiveModel::Validations

  included do
    enum currency: { USD: 0, AUD: 1, GBP: 2 }
    validates :currency, inclusion: { in: currencies.keys }
  end
end

The included method takes a block, and it is executed at any time a module is included in another module or class. In this case, the currency module defines an enum attribute which specifies a named value for each currency. It also validates the currency attribute is set to one of the values defined in the enum. To use the concern, simply include it:

class Payment < ApplicationRecord
  include Currency
end

class Withdrawal < ApplicationRecord
  include Currency
end

And that is it! The Payment and Withdrawal models now define how to access and validate the currency attribute (assuming a migration for the currency column was created and ran appropriately in each table).

Testing

Testing shared behavior of classes or modules can be greatly simplified by using rspec's shared examples. In spec/support/shared_examples/currency_spec.rb I defined a shared example (note that I'm using the shoulda-matchers gem):

shared_examples_for 'currency' do
  let(:model) { described_class }

  it { should define_enum_for(:currency).with_values(USD: 0, AUD: 1, GBP: 2) }

  describe 'validations' do
    it { should allow_value(model.currencies[:USD]).for(:currency) }
    it { should allow_value(model.currencies[:AUD]).for(:currency) }
    it { should allow_value(model.currencies[:GBP]).for(:currency) }
  end
end

To use it, just include the shared example in the models context:

RSpec.describe Payment, type: :model do
  it_behaves_like 'currency'
end

RSpec.describe Withdrawal, type: :model do
  it_behaves_like 'currency'
end

Done! Models that include the concern can easily test its functionality by using a shared example as described above.

Conclusion

In this short blog post, I have shown a simple solution to encapsulate and group together data access and validation of an attribute. Note I have chosen to use ActiveSupport::Concern because the same attribute is used by many models. If the currency attribute was only used by a single model, I would not have defined a concern for it. Finally, I have demonstrated how to use rspec's shared examples to simplify testing shared behavior of classes or modules.

Have you ever implemented something similar? How did you do it? Let me know in a comment below :).

OKRs as a Framework for Personal Growth

Diego Castillo — Sun, 11 Aug 2019 19:41:17 +0000

A couple of years ago I worked for a company where Objectives and Key Results (OKRs) were used as a framework to track objectives and key results (well, duh!). As I researched and learned more about the framework, I asked myself "companies keep track of business because it helps improve visibility of what is going on and thus increase their chance of success. Is it possible to use OKRs for personal growth?" Sure, you could argue keeping track of money is certainly easier than keeping track of happiness/health, but a quick search for OKRs for personal growth allowed me to realize I wasn't alone in this camp. I have now being using OKRs as a framework for personal growth for three years, and it is by far the most important tool I use to align my goals with my day-to-day actions. In this short blog post, I'll share my experience with OKRs during the past three years. I hope it can help you to learn from my mistakes and consider systematically tracking progress towards your goals if not already doing it.

Initially, I used OKRs as a framework to hold myself accountable for professional continuous learning. I work as a software developer, and as such, I like to keep myself up-to-date with new trends/technologies as well as study well established software concepts. As I gained more confidence and got used to measuring my actions, I started to create objectives and key results related to health, music, reading, and other areas of life I wanted to become better at. Only once I started to measure my progress towards these goals I was able to realize that I wasn't doing what I actually wanted to do (pretty dumb, right?). How was I supposed to become a better jazz guitar player if I didn't put enough hours of practice? How was I going to ever increase my squat if I wasn't actually training? This was a weird but important realization for me. OKRs gave me the visibility I needed to better understand my actions and evaluate how these were related to my goals.

It didn't take long to learn motivation is overrated. While effective when present, consistency and discipline are far more powerful tools. OKRs taught me that a structured path and consistency were the most important tools to achieve success. This is basically what schools and other institutions do for us. We delegate to these institutions the creation and evaluation of a curriculum that will allows us to gain the required knowledge to become a professional in some area. Only issue though, is that once we are done with these institutions, it is up to us to create a "curriculum" and evaluate whether we are making progress towards our personal and professional goals.

Using OKRs as a framework to track my personal growth eventually led me to realize I wanted to do too many things. I was simply unable to fit in my schedule the tasks that needed to be done in order to make progress towards the goals I had set for myself. This led me to learn more about another important topic: prioritization. I had to prioritize and carefully choose what goals were of utmost importance to me and only then execute. Interestingly enough, this exercise made me realize I had many goals which I actually didn't care that much about, and thus required less/no attention.

One of my favorite things about OKRs is that these enforce creating SMART goals. As I said in the introduction, it is difficult to measure goals such as how happy/healthy we are, but we can measure actions that make us happier/healthier. In my case, these actions go anywhere from traveling, training, writing or simply reading a book in my leisure time. The best part is that consistently doing these actions leads to create habits that have compounding effect in my life and those around me. Using OKRs has helped me to create and sustain habits that aid me to consistently grow as a person and professional.

Conclusion

Measuring how my day-to-day actions relate to my personal goals has been a complete game changer. OKRs is the one framework that has allowed me to do so consistently for the past three years.

How do you hold yourself accountable for your personal growth? Leave a comment below if you do, I would love to read more about others' approach to personal growth!

DEV Community: Diego Castillo

Simple Next.js Magic Link JWT Authentication with Prisma, PostgreSQL, and Resend

Getting Started

Installing Dependencies

Prisma Setup

Configure the Resend Provider with Prisma

Conclusion and Further Improvements

Scroll to Input on Formik Failed Submission

Formik Errors

Scroll To Field Error

Email and Password Based Authentication with Expo and Firebase Part 3: Sign In, Forgot Password, and Update Password

Sign In

Forgot Password

Update Password

Conclusion

Email and Password Based Authentication with Expo and Firebase Part 2: Sign up, Email Verification, and Sign Out

Navigation

Sign Up

Email Verification

Sign Out

Conclusion

Email and Password Based Authentication with Expo and Firebase Part 1: Project Setup

Create a New Expo App

Create a Firebase Project

Configure Expo and Firebase

Application Structure and Dependencies

Re-cap

Create a Simple React Timer Component ⌛

The Plan 💡

The Timer Reducer ⚒️

The tick Action

The play Action

The pause Action

The stop Action

The useTimer Hook

Conclusion 🤝

Using Postgres Enum Type in Rails

Postgres Enumerated Types

Active Record Enum

Unit Tests

Conclusion

Using Active Support Concerns to Encapsulate Data Access and Validation

The Gist

The Solution

Testing

Conclusion

OKRs as a Framework for Personal Growth

Conclusion

The `tick` Action

The `play` Action

The `pause` Action

The `stop` Action

The `useTimer` Hook