WorkOS Integration

This tutorial will guide you through the process of integrating WorkOS with your Raindrop application. To use WorkOS as an authentication provider for your Raindrop application, we will be creating a WorkOS Team and a WorkOS Environment for your Raindrop organization and application, then configuring your authentication redirects and CORS for sessions.

Prerequisites

Before you begin:

• LiquidMetal Account: Sign up at liquidmetal.run
• A Raindrop Application: Either a backend application with a domain name or a frontend application
• Raindrop CLI: Install the latest version of the Raindrop CLI:

npm i -g @liquidmetal-ai/raindrop@latest

Establish your Raindrop Organization with a WorkOS Team

To establish your Raindrop Organization with a WorkOS team, run the following command:

raindrop build workos setup

This will prompt you to create a new WorkOS team in your Raindrop Organization.

Caution

If you are not the admin of the Raindrop organization, you will need to run:

raindrop build workos setup --admin-email=<YOUR_EMAIL>

This will prompt you to create a new WorkOS team using your email with the Raindrop organization of your Raindrop application.

Expected Output:

✅ WorkOS integration activated successfully!

Team Details:
  Team ID:   team_123
  Team Name: My Team
  Created:  2021-01-01 12:00:00

Next steps:
  • Check your email for the team admin invitation
  • Create environments for your apps: raindrop build workos env create <app-name>
  • Invite team members: raindrop build workos invite <email> --role <role>

Deploy Your Application

Deploy your application by running the following command:

raindrop build deploy

Create and Attach a WorkOS Environment to Your Raindrop Application

Create a new WorkOS environment by running the following command:

raindrop build workos env create <app-name>

This will automatically attach the WorkOS environment to your application.

Expected Output:

✅ WorkOS environment created successfully!

Environment Details:
  Environment ID:   env_123
  Environment Name: My Environment
  Created:  2021-01-01 12:00:00

Tip

The <app-name> is OPTIONAL. The command will default to your application name.

Expected Output:

✅ WorkOS environment created for test-app

  Environment:   <app-name>
  Type:          staging
  Attached to:   <app-name> (current version)

The environment, organization, and API key have been automatically configured.
Environment has been attached to the current version.

Next Steps - Required Configuration:

1. Configure Auth Redirects:
   https://dashboard.workos.com/<environment-id>/redirects
   Add your application redirect URIs for authentication flows

2. Configure CORS for Sessions:
   https://dashboard.workos.com/<environment-id>/authentication/sessions
   Add allowed origins for frontend applications

3. Implement CORS Hook:
   Ensure your Raindrop application has a CORS hook configured
   This is required for frontend clients to communicate with your API

View details with: raindrop build workos env get test-app

Configure Auth Redirects

1. Configure your application’s redirect URIs for authentication flows by visiting WorkOS’ dashboard by using the URL output. You can also click here: https://dashboard.workos.com.
2. Click Redirects under the Developer section in the left sidebar.
3. Click Add Redirect URI under Redirect URIs.
4. Add your application’s redirect URIs for authentication flows.

Caution

The redirect URIs you add here must be the one you direct your users to after they authenticate with WorkOS in your application.

Configure CORS

1. Configure your application’s CORS by visiting WorkOS’ dashboard by using the URL output. You can also click here: https://dashboard.workos.com.
2. Click Authentication under the Configurations section in the left sidebar.
3. Click Sessions.
4. Under Cross-Origin-Resource-Sharing (CORS), click Manage.
5. Add your application’s allowed origins for frontend applications.

Your application’s Authentication and CORS is now configured.

Deploy your Authentication and CORS configured application

Deploy your application by running the following command:

raindrop build deploy

Your application is now deployed with WorkOS Authentication. For more information on how to use WorkOS, visit their WorkOS Connect Docs.

Now that you configured your application with WorkOS, you can proceed with the Stripe Integration tutorial to add Stripe payments to your Raindrop application.