Forem: Sebastian Goscinski

Getting Started with Auth0 and Next.js: A Step-by-Step Guide

Sebastian Goscinski — Mon, 20 Nov 2023 07:42:12 +0000

In today's digital era, securing your web applications is paramount. Authentication is a critical component of any app, and it's essential to manage it well. For developers using Next.js, integrating an authentication service can be a bit daunting. That's where Auth0 comes in a powerful authentication and authorization platform that simplifies this process. In this article, we'll walk you through the steps to get started with Auth0 and Next.js, securing your app effectively and efficiently.

What is Auth0?

Auth0 is an authentication and authorization service that offers a lot of features out of the box, such as social login integrations, enterprise identity providers, passwordless login, and much more. It allows developers to implement complex authentication features with minimal effort.

What is Next.js?

Next.js is a React framework that enables functionality such as server-side rendering and generating static websites for React-based web applications. It's a powerful tool for creating high-performance applications with an emphasis on a great developer experience.

Prerequisites

Basic knowledge of JavaScript and React
Node.js installed on your system
A code editor (VSCode, Sublime Text, etc.)
An Auth0 account (you can sign up for free at Auth0's website)

Step 1: Set Up Your Auth0 Application

First, you need to set up an application in Auth0:

Log in to your Auth0 Dashboard.
Click on "Applications" in the sidebar and then "Create Application".
Give your application a name, choose "Single Page Web Applications", and click "Create".
In the "Settings" tab, add http://localhost:3000 to the "Allowed Callback URLs", "Allowed Logout URLs", and "Allowed Web Origins".
Scroll down and click "Save Changes".

Make note of the Domain, Client ID, and Client Secret from the settings page, as you will need these for your Next.js application.

Step 2: Bootstrap Your Next.js Application

Create a new Next.js app by running the following command in your terminal:

npx create-next-app my-auth0-app
cd my-auth0-app

This will create a new directory called my-auth0-app with a starter Next.js application.

Step 3: Install Auth0 SDK for Next.js

Auth0 provides an SDK that makes integration with Next.js a breeze. Install it using npm or yarn:

npm install @auth0/nextjs-auth0

yarn add @auth0/nextjs-auth0

Step 4: Set Up Environment Variables

Create a .env.local file in the root of your Next.js project and add the following environment variables with the values from your Auth0 application settings:

AUTH0_SECRET='a_long_unique_value_like_a_guid'
AUTH0_BASE_URL='http://localhost:3000'
AUTH0_ISSUER_BASE_URL='https://YOUR_AUTH0_DOMAIN'
AUTH0_CLIENT_ID='YOUR_AUTH0_CLIENT_ID'
AUTH0_CLIENT_SECRET='YOUR_AUTH0_CLIENT_SECRET'

Replace YOUR_AUTH0_DOMAIN, YOUR_AUTH0_CLIENT_ID, and YOUR_AUTH0_CLIENT_SECRET with the actual values from your Auth0 application.

Step 5: Configure Auth0 SDK

Create a file called auth0.js inside a new folder utils in your project and initialize the Auth0 SDK like so:

import { initAuth0 } from '@auth0/nextjs-auth0';

export default initAuth0({
  secret: process.env.AUTH0_SECRET,
  issuerBaseURL: process.env.AUTH0_ISSUER_BASE_URL,
  baseURL: process.env.AUTH0_BASE_URL,
  clientID: process.env.AUTH0_CLIENT_ID,
  clientSecret: process.env.AUTH0_CLIENT_SECRET,
  routes: {
    callback: '/api/auth/callback',
    postLogoutRedirect: '/'
  },
  session: {
    // The secret used to encrypt the cookie
    cookieSecret: process.env.AUTH0_SECRET,
    cookieLifetime: 60 * 60 * 8,
    storeIdToken: false,
    storeAccessToken: false,
    storeRefreshToken: false
  }
});

This configures the SDK with your Auth0 application settings.

Step 6: Create API Routes for Authentication

In Next.js, API routes provide a solution to build your API with JavaScript and Node.js. Create the following two files in the pages/api/auth directory:

[...auth0].js: This will handle login, logout, and callback.

import auth0 from '../../../utils/auth0';

export default async function auth(req, res) {
  try {
    await auth0.handleAuth(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

me.js: This will show the user profile information.

import auth0 from '../../../utils/auth0';

export default async function me(req, res) {
  try {
    await auth0.handleProfile(req, res);
  } catch (error) {
    console.error(error);
    res.status(error.status || 500).end(error.message);
  }
}

Step 7: Add Authentication to Your Pages

Now, you can use the Auth0 SDK in your React components to add authentication. Here's an example of how to implement a login button:

import React from 'react';
import { useUser } from '@auth0/nextjs-auth0';

export default function Home() {
  const { user, error, isLoading } = useUser();

  return (
    <div>
      {isLoading && <p>Loading...</p>}
      {error && <p>{error.message}</p>}
      {user ? (
        <div>
          <h1>Welcome, {user.name}!</h1>
          <p><img src={user.picture} alt={user.name} /></p>
          <p><a href="/api/auth/logout">Logout</a></p>
        </div>
      ) : (
        <p><a href="/api/auth/login">Login</a></p>
      )}
    </div>
  );
}

This code checks if the user is authenticated and displays their name and a logout button. If the user is not authenticated, it shows a login button.

Step 8: Protecting Routes

To protect a route and make it accessible only to authenticated users, you can use the withPageAuthRequired higher-order component from the SDK:

import { withPageAuthRequired } from '@auth0/nextjs-auth0';

export const getServerSideProps = withPageAuthRequired();

export default function ProtectedPage() {
  return <div>This is a protected page</div>;
}

Step 9: Deploying Your App

When you're ready to go live, don't forget to add the actual deployment URL to the "Allowed Callback URLs", "Allowed Logout URLs", and "Allowed Web Origins" in your Auth0 application settings.

Deploy your Next.js app to Vercel, Netlify, or any other hosting provider that supports Node.js.

Conclusion

Congratulations! You've successfully integrated Auth0 with Next.js, providing robust authentication for your application. Auth0's platform makes managing users and their authentication states a breeze, allowing you to focus on developing the core features of your app.

Remember to secure your user data, use environment variables to protect your secrets, and always keep your dependencies up to date. Security is an ever-evolving field, and staying informed is key.

For more advanced topics, such as role-based access control and multi-factor authentication with Auth0 and Next.js, stay tuned to sebiweise.dev. Happy coding!

Getting Started with Clerk and Next.js: A Secure and Scalable Authentication Solution

Sebastian Goscinski — Mon, 20 Nov 2023 07:42:11 +0000

In the realm of modern web application development, authentication is a critical component that ensures only authorized users can access certain functionalities. Clerk.dev is an authentication and user management system that simplifies the incorporation of secure sign-in and user management features into your applications. When combined with Next.js, Clerk provides developers with a scalable and secure authentication solution that can be easily integrated into your web app.

In this advanced tutorial, we'll walk through setting up Clerk with a Next.js application, demonstrating how to implement a robust authentication flow.

Prerequisites

Before diving into the integration process, ensure you have:

Basic knowledge of React and Next.js.
Node.js and npm/yarn installed on your machine.
A Clerk.dev account (you can sign up for free to get started).

Step 1: Setting Up Next.js

First, let's create a new Next.js application if you haven't already done so:

npx create-next-app my-nextjs-app
cd my-nextjs-app

Step 2: Installing Clerk

Once your Next.js app is ready, install the Clerk Next.js SDK:

npm install @clerk/nextjs

Step 3: Configuring Clerk in Your Application

After installing the Clerk SDK, you need to configure Clerk to work with your Next.js app. Start by setting up your Clerk Frontend API and creating a .env.local file in the root of your Next.js project with the following content:

NEXT_PUBLIC_CLERK_FRONTEND_API=your-clerk-frontend-api.clerk.app

Replace your-clerk-frontend-api.clerk.app with the actual Frontend API value from your Clerk dashboard.

Step 4: Setting Up the ClerkProvider

Wrap your application in the ClerkProvider to manage the authentication state globally. Modify your _app.js file to include the provider like so:

import { ClerkProvider } from '@clerk/nextjs';
import { useRouter } from 'next/router';

function MyApp({ Component, pageProps }) {
  const { pathname } = useRouter();
  const isSignInOrSignUpPage = pathname.startsWith('/sign-in') || pathname.startsWith('/sign-up');

  return (
    <ClerkProvider {...pageProps}>
      {isSignInOrSignUpPage ? (
        <Component {...pageProps} />
      ) : (
        <ProtectedRoute>
          <Component {...pageProps} />
        </ProtectedRoute>
      )}
    </ClerkProvider>
  );
}

function ProtectedRoute({ children }) {
  const { isLoaded, isSignedIn } = useClerk();
  if (!isLoaded) return 'Loading...';
  if (!isSignedIn) {
    useRouter().push('/sign-in');
    return 'Redirecting to sign-in...';
  }
  return children;
}

export default MyApp;

This snippet ensures that Clerk is initialized and wraps your pages with a protected route component.

Step 5: Adding Sign-In and Sign-Up Pages

Create sign-in and sign-up pages to handle user authentication. Clerk provides components to easily add these features:

// pages/sign-in.js
import { SignIn } from '@clerk/nextjs';

const SignInPage = () => <SignIn path="/sign-in" routing="path" />;
export default SignInPage;

// pages/sign-up.js
import { SignUp } from '@clerk/nextjs';

const SignUpPage = () => <SignUp path="/sign-up" routing="path" />;
export default SignUpPage;

Step 6: Using the useUser Hook

Clerk's useUser hook allows you to access the authenticated user's data. Here's an example of how to use it inside a component:

import { useUser } from '@clerk/nextjs';

const UserProfile = () => {
  const { user } = useUser();

  if (!user) {
    return <div>Loading...</div>;
  }

  return (
    <div>
      <h1>Welcome, {user.firstName}!</h1>
      <p>Email: {user.emailAddresses[0].emailAddress}</p>
    </div>
  );
};

export default UserProfile;

Step 7: Running and Testing Your Application

Now, run your Next.js application and navigate to the sign-in and sign-up pages to test the authentication flow:

npm run dev

Visit http://localhost:3000/sign-in and http://localhost:3000/sign-up to see Clerk's authentication components in action.

Conclusion

You've successfully integrated Clerk with your Next.js application, providing a scalable and secure authentication system. Clerk's simplicity and integration with Next.js allow you to focus more on building features rather than worrying about the complexities of managing user authentication.

By following this guide, you have laid the groundwork for adding more advanced user management and security features to your application with Clerk. Continue to explore Clerk's documentation and Next.js to enhance your app's capabilities and provide an even richer user experience.

Planetscale: Overview and Benefits

Sebastian Goscinski — Sun, 19 Nov 2023 21:40:13 +0000

As web applications grow in complexity, the need for scalable and manageable databases becomes more pronounced. PlanetScale is a database platform that promises to address these needs, offering a MySQL-compatible, serverless database service built on the scalable foundation of Vitess.

What is PlanetScale?

PlanetScale is a fully managed database service designed to handle the demands of modern applications. It provides a serverless experience with the reliability of MySQL and the scalability of Vitess, a database clustering system for horizontal scaling of MySQL.

Key Benefits of PlanetScale

Scalability: With its serverless architecture, PlanetScale can scale up or down automatically to match your application's needs without downtime.
Branching: Unique to PlanetScale, branching allows developers to create database branches for features, testing, and staging environments, similar to Git branches for code.
No Lock-in: Built on open-source technology, PlanetScale allows you to migrate your data in and out without being locked into a proprietary ecosystem.
Performance: PlanetScale is designed to provide consistent performance, even with large, complex queries and high volumes of data.
Security: The platform offers end-to-end encryption and automatic backups, ensuring your data is secure and recoverable.

Ideal Use Cases

PlanetScale is well-suited for applications that require a robust, scalable database without the overhead of managing clustering and sharding. It's also an excellent choice for teams that want to adopt DevOps practices for database management.

Conclusion

For developers and organizations that require a scalable, MySQL-compatible database with the benefits of modern DevOps practices, PlanetScale presents a powerful solution. Its serverless approach and unique branching feature make it an innovative player in the realm of cloud databases.

Implementing Fine-Grained Network Segmentation with Tailscale ACLs

Sebastian Goscinski — Sun, 19 Nov 2023 21:36:59 +0000

In recent posts, weve explored the fundamentals of Tailscale and how it can be integrated with pfSense, as well as an introduction to basic access control configurations. Building on that knowledge, its time to dive deeper into creating fine-grained network segmentation using Tailscales Access Control Lists (ACLs) for ultimate control over network traffic and user permissions.

Proper segmentation is key in a well-architected network for both security and efficiency. In this article, we'll explore multiple scenarios showing how Tailscale ACLs can be used to carve out precise access for various user roles and resources within your network.

Scenario 1: Hosting Multiple Services on a Single Device

The Challenge : You have a server hosting multiple services, such as a web server on port 80 and an SSH service on port 22, and you want to grant access to these services to different user groups.

The ACL Strategy :

Assign tags to the servers services, separating the web service from SSH.
Define user groups for web developers and system administrators.
Create ACL rules to segment access.

Example Configuration :

{
  "Groups": {
    "group:web-devs": ["dev1@example.com", "dev2@example.com"],
    "group:sysadmins": ["admin@example.com"]
  },
  "Tags": {
    "tag:web": ["100.101.102.1"],
    "tag:ssh": ["100.101.102.1"]
  },
  "ACLs": [
    {
      "Action": "accept",
      "Users": ["group:web-devs"],
      "Ports": ["tag:web:80"]
    },
    {
      "Action": "accept",
      "Users": ["group:sysadmins"],
      "Ports": ["tag:ssh:22"]
    }
  ]
}

In this example, only web developers have access to the web server, while only system administrators can SSH into the machine.

Scenario 2: Granular Access within the Companys Departments

The Challenge : The company has multiple departments, such as HR, Engineering, and Sales, requiring access to specific resources without exposing them to the entire network.

The ACL Strategy :

Create tags for resources belonging to each department.
Define user groups per department.
Write ACL rules to establish access boundaries.

Example Configuration :

{
  "Groups": {
    "group:hr": ["hr@example.com"],
    "group:engineering": ["eng@example.com"],
    "group:sales": ["sales@example.com"]
  },
  "Tags": {
    "tag:hr-resources": ["100.201.202.1"],
    "tag:engineering-resources": ["100.201.202.2"],
    "tag:sales-resources": ["100.201.202.3"]
  },
  "ACLs": [
    {
      "Action": "accept",
      "Users": ["group:hr"],
      "Ports": ["tag:hr-resources:*"]
    },
    {
      "Action": "accept",
      "Users": ["group:engineering"],
      "Ports": ["tag:engineering-resources:*"]
    },
    {

      "Action": "accept",
      "Users": ["group:sales"],
      "Ports": ["tag:sales-resources:*"]
    }
  ]
}

This configuration ensures that each department only accesses its designated resources.

Scenario 3: Time-Limited Access for Temporary Project Teams

The Challenge : You have teams working on short-term projects needing temporary access to certain parts of the network.

The ACL Strategy :

Use Tailscales ephemeral key feature to create time-limited access for devices.
Assign temporary tags correlating with project resources.
Define ACL rules that expire along with the ephemeral keys.

Example Configuration :

Create ephemeral keys manually in the Tailscale admin panel and apply the following ACLs.

{
  "Groups": {
    "group:project-alice": ["temporary-key-alice@example.com"],
    "group:project-bob": ["temporary-key-bob@example.com"]
  },
  "Tags": {
    "tag:project-resources": ["100.301.302.2"]
  },
  "ACLs": [
    {
      "Action": "accept",
      "Users": ["group:project-alice"],
      "Ports": ["tag:project-resources:8080"]
    },
    {
      "Action": "accept",
      "Users": ["group:project-bob"],
      "Ports": ["tag:project-resources:8080"]
    }
  ]
}

The ephemeral keys expire based on the configuration you set, which automatically revokes the associated devices network access.

Scenario 4: Enforcing Different Access Levels for the Same User

The Challenge : A user needs different levels of access depending on whether they're on a corporate or personal device.

The ACL Strategy :

Tag devices accordingly as corporate or personal.
Define ACL rules to grant broad access from corporate devices and more limited access from personal devices.

Example Configuration :

{
  "Groups": {
    "group:user-jane": ["jane@example.com"]
  },
  "Tags": {
    "tag:jane-personal": ["jane-personal-device"],
    "tag:jane-corporate": ["jane-corporate-device"]
  },
  "ACLs": [
    {
      "Action": "accept",
      "Users": ["group:user-jane"],
      "Ports": ["tag:jane-corporate:*"]
    },
    {
      "Action": "accept",
      "Users": ["group:user-jane"],
      "Ports": ["tag:jane-personal:443"]
    }
  ]
}

With this setup, Jane has unrestricted access from her corporate device, while her personal device is limited to HTTPS traffic.

Conclusion

Tailscales ACL system offers unrivaled flexibility for network segmentation and access control, proving indispensable in a modern, dynamic network environment. When deploying your ACL configurations, always validate and test each rule to ensure they align with your intended security policies and access requirements.

Effective use of ACLs enhances both security and productivity, and with Tailscale, setups that were once complex and cumbersome are accessible and manageable. By engaging with scenarios like these, you can adapt solutions to fit your unique network topology and organizational needs.

For more advanced tips and strategies on managing a secure and efficient network, keep connected with sebiweise.dev.

Advanced Access Control Configuration with Tailscale: Practical Examples

Sebastian Goscinski — Fri, 17 Nov 2023 14:00:13 +0000

Tailscale's Access Control Lists (ACLs) are a powerful feature for securing your network. They allow fine-grained control over which users and devices can access specific resources. To give you a better understanding of how to implement advanced access controls, let's walk through some practical examples.

Scenario 1: Role-Based Access to Servers

Imagine you have two groups of machines in your network: development servers and production servers. You want your developers to access the development servers but not the production ones.

Defining Groups and Tags

First, you'll need to create groups for your users and tags for your devices.

"Groups": {
  "group:developers": ["alice@example.com", "bob@example.com"],
  "group:admins": ["admin@example.com"]
},
"Tags": {
  "tag:dev-server": ["100.100.100.1", "100.100.100.2"],
  "tag:prod-server": ["100.100.200.1", "100.100.200.2"]
}

ACL Rules

Next, define ACL rules to grant access to the developers.

"ACLs": [
  {
    "Action": "accept",
    "Users": ["group:developers"],
    "Ports": ["tag:dev-server:*"]
  },
  {
    "Action": "accept",
    "Users": ["group:admins"],
    "Ports": ["*:*"]
  }
],

In this example, developers can access any port on the development servers, while admins have unrestricted access.

Scenario 2: Restricting Access to Sensitive Services

Now, let's say you have a financial service running on port 8443 that should only be accessible to the finance team.

Defining Groups

Add your finance team members to a group.

"Groups": {
  "group:finance": ["carol@example.com", "dave@example.com"]
},

ACL Rules

Create a rule that specifies access to the financial service.

"ACLs": [
  {
    "Action": "accept",
    "Users": ["group:finance"],
    "Ports": ["100.100.300.1:8443"]
  }
],

Only members of the finance group can access the service on the specified port.

Scenario 3: Enforcing Protocol-Specific Restrictions

Suppose you want to allow SSH access to all servers for the IT support team, but you want to restrict SSH access from outside the office for everyone else.

Defining Groups and Tags

Create a group for the IT support team and a tag for office-based devices.

"Groups": {
  "group:it-support": ["eve@example.com", "frank@example.com"]
},
"Tags": {
  "tag:office": ["100.100.400.1", "100.100.400.2"]
}

ACL Rules

"ACLs": [
  {
    "Action": "accept",
    "Users": ["group:it-support"],
    "Ports": ["*:22"]
  },
  {
    "Action": "accept",
    "Users": ["group:all-users"],
    "Ports": ["tag:office:22"]
  }
],

In this scenario, the IT support team can SSH into any server regardless of location, while other users can only SSH from devices tagged as being in the office.

Scenario 4: Dynamic Access Based on Device Tags

Imagine you want to give contractors access to specific devices without exposing your entire network.

Defining Groups and Tags

Create a group for contractors and tags for the devices they should access.

"Groups": {
  "group:contractors": ["gary@example.com", "helen@example.com"]
},
"Tags": {
  "tag:contractor-device": ["100.100.500.1", "100.100.500.2"]
}

ACL Rules

"ACLs": [
  {
    "Action": "accept",
    "Users": ["group:contractors"],
    "Ports": ["tag:contractor-device:*"]
  }
],

This rule allows contractors to connect to the devices with the contractor-device tag on any port.

Conclusion

These examples provide a glimpse into the versatility and strength of Tailscale's ACLs. When configuring ACLs, always start with the principle of least privilege, giving users only the access they need to perform their roles. Regularly review and update your ACLs as your network evolves.

Remember, these are JSON configurations, so ensure that your syntax is correct to avoid errors. Use Tailscale's admin console to apply these ACLs, and always test your configurations to confirm that they work as intended.

Tailoring access controls is a dynamic process that requires ongoing attention. By continuing to refine your Tailscale ACLs, you'll maintain a secure, efficient, and well-organized network.

Mastering Advanced Access Controls with Tailscale on Your Network

Sebastian Goscinski — Fri, 17 Nov 2023 11:00:12 +0000

In our previous discussions, we've delved into the basics of setting up Tailscale and integrating it with pfSense to create a secure, private network. However, the true power of Tailscale shines when you leverage its advanced Access Control Lists (ACLs) to fine-tune user permissions and network access. This time, let's dive deeper into configuring advanced access controls to ensure that your network is not only secure but also precisely tailored to the needs of your users and services.

Understanding Tailscale ACLs

Tailscale ACLs are JSON-formatted rules that dictate who can access what within your Tailscale network. These rules can be as broad or as granular as needed, controlling access based on user groups, device tags, and even specific ports and protocols.

Key Components of Tailscale ACLs:

Groups : Define collections of users or devices for easier management.
Tags : Assign labels to devices to apply specific policies.
ACL Rules : Specify which groups or tags can access certain resources, such as IP addresses, ports, and protocols.
Default Policies : Set baseline permissions that apply when no other rules match.

Step 1: Planning Your Access Structure

Before diving into the Tailscale admin console, it's crucial to plan your access structure. Consider the following:

Which users need access to which resources?
Are there any services that should only be accessible by specific devices or user roles?
Do you need to restrict certain types of traffic, such as SSH or RDP?

Step 2: Defining Groups and Tags

Groups and tags are the building blocks of your ACLs. They help you organize your network entities for more straightforward rule application.

Identify the users and devices that require similar access levels and group them accordingly.
Create tags to represent roles, locations, or device types within your network.

Step 3: Writing ACL Rules

With your groups and tags defined, you can start writing the ACL rules.

Log into the Tailscale admin console and navigate to the Access Controls section.
Edit your ACLs by updating the JSON configuration. Here's an example of a rule that allows the engineering group to access the SSH port on devices tagged as dev-servers:

{
  "ACLs": [
    {
      "Action": "accept",
      "Users": ["group:engineering"],
      "Ports": ["tag:dev-servers:22"]
    }
  ]
}

Specify as many rules as needed to cover all the necessary access patterns within your network.

Step 4: Implementing Default Policies

Default policies serve as the catch-all rules that apply when no other ACL rules match.

Decide on the least-privileged access level appropriate for your network.
Configure default policies to deny access by default, only allowing specific traffic as defined in your ACL rules.

Step 5: Testing and Verifying Access

After configuring your ACLs:

Apply the changes in the Tailscale admin console.
Test the access controls by attempting to reach the resources defined in your ACL rules from various user accounts and devices.
Verify that the access patterns match your intentions and that there are no unintended permissions.

Step 6: Regularly Review and Update ACLs

Maintaining secure access controls requires ongoing attention:

Review your ACLs periodically to ensure they remain relevant to your changing network needs.
Update your ACLs as you onboard new services, users, or devices to the network.
Audit access logs to detect any unusual activity or access patterns that need addressing.

Conclusion

Advanced access controls are a cornerstone of network security, and Tailscale's ACLs offer a powerful mechanism to enforce precise access permissions within your network. By carefully planning your access structure and implementing granular ACL rules, you can create a secure environment that caters to the specific needs of your users and services.

Remember, the strength of your network security lies not only in the tools you use but also in the policies you enforce. With Tailscale's advanced access controls, you have the power to create a robust, flexible, and secure network that supports the dynamic demands of your users.

Keep experimenting, refining, and learning. Your network is a living entity, and with Tailscale's advanced access controls, you're well-equipped to keep it secure and efficient. For more tips, insights, and guides on network security and management, keep visiting sebiweise.dev.

Elevating Network Security: Integrating Tailscale with pfSense

Sebastian Goscinski — Thu, 16 Nov 2023 11:00:12 +0000

As the demand for secure remote access solutions grows, integrating Tailscale with pfSense offers a powerful combination for enhancing network security and connectivity. pfSense, an open-source firewall and router platform, is renowned for its reliability and comprehensive feature set. The recent introduction of the integrated Tailscale package allows pfSense users to leverage the simplicity and security of Tailscale's mesh VPN directly within their existing network infrastructure.

In this advanced tutorial, we'll delve into setting up Tailscale on a pfSense router, creating a seamless bridge between the robust firewall capabilities of pfSense and the user-friendly, encrypted connectivity of Tailscale.

Prerequisites

Before proceeding, ensure you have the following:

A pfSense router with the latest stable version installed.
Administrative access to the pfSense web interface.
A Tailscale account, which you can create at Tailscale's website.

Step 1: Installing the Tailscale Package on pfSense

Tailscale can be easily added to pfSense through its package system.

Log in to the pfSense web interface.
Navigate to System > Package Manager.
Switch to the Available Packages tab and search for "Tailscale."
Find the Tailscale package in the list and click on the Install button.
Confirm the installation and wait for the process to complete.

Step 2: Configuring Tailscale on pfSense

Once installed, Tailscale needs to be configured to communicate with your network.

In the pfSense web interface, go to Services > Tailscale.
You will be prompted to link your Tailscale account. Click on the provided link to authenticate through the Tailscale website.
After authentication, youll receive an auth key. Copy this key.
Return to the pfSense Tailscale settings page and paste the auth key into the appropriate field.
Click Save to apply the changes.

Step 3: Setting Up Devices

With Tailscale active on your pfSense router, you can now set up devices to connect through the VPN.

Install the Tailscale client on the devices you wish to connect.
Log in with your Tailscale account on each device and connect them to your Tailscale network.

Step 4: Managing Network Routes

Tailscale on pfSense allows you to manage network routes directly within the Tailscale interface.

Access the Tailscale admin console through your Tailscale account.
Navigate to the Machines tab to see your pfSense router listed among other devices.
You can configure the router to advertise specific routes to the Tailscale network, allowing devices connected to Tailscale to access various subnets behind the pfSense router.

Step 5: Configuring Access Controls

Tailscale Access Controls (ACLs) can be used to manage permissions within your network.

In the Tailscale admin console, go to the Access Controls section.
Here you can create and manage user groups, assign roles, and set up ACLs to control access to network resources.
Use the ACL tags feature to apply policies to devices, including your pfSense router.

Step 6: Securing Your Setup

It's crucial to ensure your Tailscale and pfSense configurations adhere to best security practices.

Regularly update the Tailscale package on pfSense.
Keep your pfSense firmware up to date for the latest security patches.
Periodically review your Tailscale ACLs and remove any unnecessary permissions.
Use pfSense's firewall rules to further secure traffic entering and leaving the Tailscale network.

Conclusion

Integrating Tailscale with pfSense combines the ease and versatility of a mesh VPN with the robust security features of a leading firewall platform. By following the steps outlined in this guide, you can significantly enhance your network's security and flexibility, making remote access a breeze while maintaining strict control over your network traffic.

As you continue to explore the capabilities of Tailscale within your pfSense environment, you'll uncover new ways to streamline connectivity and protect your digital assets. The integration of these two powerful tools is just the beginning of a journey towards a more secure and interconnected network infrastructure.

Stay tuned to sebiweise.dev for more insights and tutorials on leveraging cutting-edge networking technologies to their full potential.

Can We Build Applications Without Backend with Next.js 14?

Sebastian Goscinski — Wed, 15 Nov 2023 12:13:41 +0000

In the ever-evolving landscape of web development, the traditional division between frontend and backend has been blurred by the advent of frameworks like Next.js. With the release of Next.js 14, this question has become even more pertinent: do we really need a separate backend to build robust applications?

The Rise of Fullstack Frameworks

Next.js, initially a framework for server-rendered React applications, has matured into a fullstack solution that can handle a wide range of use cases. Fullstack frameworks like Next.js allow developers to create applications that are dynamic and interactive without necessarily having to manage a separate backend service.

Next.js 14: Whats New?

Next.js 14 introduces new features that further empower developers to build applications with minimal backend dependency. Some noteworthy highlights include:

Edge API Routes: Run your code directly on the edge, closer to your users, for faster API response times and dynamic content generation.
Middleware Enhancements: Improved middleware capabilities allow for more complex request processing before reaching your pages or API routes.
Streaming Improvements: Enhanced support for React Server Components and streaming responses to improve user experience and reduce load times.

The Backend-Less Approach

With features like Edge API Routes, Next.js can now handle backend-like tasks, including authentication, data fetching, and content generation, directly on edge servers. This reduces the need for a traditional backend in some scenarios, as Next.js can communicate with databases or external APIs, process data, and serve it to the clientall without a separate backend layer.

Considerations and Limitations

While Next.js enables a backend-less approach for certain types of applications, its not a one-size-fits-all solution. Complex applications with heavy data processing, custom business logic, or specific compliance requirements may still benefit from a dedicated backend service.

Conclusion

Next.js 14 unquestionably empowers developers to build applications with fewer backend dependencies, but whether you can go entirely backend-less depends on your applications needs. As we continue to see improvements in serverless and edge capabilities, the line between frontend and backend will likely become even more indistinct.

Getting Started with Tailscale: Your Guide to a Secure, Private Network

Sebastian Goscinski — Wed, 15 Nov 2023 10:44:19 +0000

In the world of networking, security and simplicity rarely go hand in hand. However, an emerging service called Tailscale is changing the game by offering a secure, peer-to-peer, private network solution that's not just robust but also incredibly user-friendly. Whether you're a developer, a small business owner, or someone who values privacy, Tailscale can be the perfect fit for your networking needs.

What is Tailscale?

Tailscale is a zero-config VPN that creates a secure network between your devices using the WireGuard protocol. It allows you to connect various devices as if they were on the same local network, no matter where they are in the world. Tailscale is built on top of a sophisticated mesh network to ensure that your data takes the most direct path possible, reducing latency and improving speed.

Key Features:

Zero Configuration : Tailscale is designed to work out of the box without the need for complex setup.
End-to-End Encryption : All traffic is encrypted from your device to the destination, ensuring privacy and security.
Works on Any Network : Whether youre on a home network, corporate LAN, or a coffee shops Wi-Fi, Tailscale just works.
Easy Access Management : Control who has access to your network with simple, yet powerful ACLs (Access Control Lists).
Automatic Updates : The network is always kept secure with automatic updates that don't interrupt service.

Setting Up Tailscale

Getting started with Tailscale is a straightforward process. Here's a step-by-step guide to get you up and running.

Step 1: Create a Tailscale Account

First, visit Tailscale's website and sign up for an account. You can use your Google, Microsoft, or GitHub account for a quick sign-up process.

Step 2: Install Tailscale

Tailscale is available on a wide range of platforms, including Windows, macOS, Linux, iOS, and Android.

For desktop platforms, download the respective installer from the Tailscale downloads page.
For mobile devices, install Tailscale from the App Store or Google Play.

Step 3: Log In and Connect

After installation, open Tailscale and log in using the account you created.

On desktop, you may need to log in through your web browser.
On mobile, you can log in directly through the app.

Once logged in, toggle the switch to connect to your Tailscale network.

Step 4: Add Devices

To add more devices to your network, repeat steps 2 and 3 on each new device. Each device will appear in your Tailscale admin console, where you can manage connections and access rights.

Step 5: Configure Access Controls

Tailscale allows you to manage who can access what within your network. You can configure these settings in the admin console under the 'Access Control' tab.

Define user roles.
Set up ACLs to restrict or allow access to certain devices or services.
Group devices for easier management.

Step 6: Share Your Network

For others to join your Tailscale network, they'll need to create their own Tailscale account. Once theyve done that, you can share your network with them via email invitation directly from the admin console.

Tips for Using Tailscale Effectively

Magic DNS : Take advantage of Tailscale's Magic DNS feature, which assigns a unique, human-readable DNS name to each of your devices.
Subnet Routing : If you have services on a local network that you want to access remotely, use Tailscales subnet routing to make them available over your Tailscale network.
Security Audits : Regularly review your networks access controls to ensure that only authorized users have access to your network.

Conclusion

Tailscale is revolutionizing the way we think about VPNs by providing a secure, easy-to-manage, private network solution. By following the steps outlined above, you can set up your own Tailscale network and enjoy the benefits of seamless, encrypted communication between your devices.

Whether you're looking to securely access your home server from anywhere in the world, manage a fleet of IoT devices, or simply share files between colleagues without the hassle of traditional VPNs, Tailscale has you covered. With its intuitive interface and robust security features, Tailscale is a must-try for anyone looking to enhance their networking experience.

Take the plunge into a more secure, interconnected world with Tailscale. Your network will thank you for it.

Hasura: Building Scalable and Real-Time Applications - An Extensive Guide

Sebastian Goscinski — Fri, 03 Mar 2023 13:11:00 +0000

Building robust and scalable APIs is a critical aspect of modern web application development. However, designing and implementing an API can be a time-consuming and complex process. Enter Hasura, a platform that simplifies the development and deployment of GraphQL APIs. In this article, we'll explore the features and benefits of Hasura, how it simplifies API development, and how it can help businesses and developers to build scalable and secure APIs.

Introduction to Hasura

What is Hasura?

Hasura is an open-source platform for building, deploying, and managing GraphQL APIs. It provides a range of tools and features that simplify the process of building APIs, including data modeling, real-time subscriptions, automated scaling and security, and team collaboration tools.

At its core, Hasura provides a unified interface for querying and manipulating data across multiple data sources. This allows developers to create APIs that can be used by a wide range of clients, including mobile applications, web applications, and IoT devices.

Why use Hasura for API development?

There are several reasons why Hasura is an excellent choice for building APIs:

Ease of use: Hasura's user-friendly interface and intuitive workflows make it easy for developers to get started with building APIs.
Real-time subscriptions: Hasura provides real-time subscriptions, which enable developers to build real-time applications that can respond to events as they happen.
Automated scaling and security: Hasura automates the process of scaling and securing APIs, which reduces the need for manual intervention and ensures that APIs are secure and scalable.
Collaboration and team management: Hasura provides a range of tools and features that enable multiple developers to work on a project simultaneously, including version control, team management, and collaboration tools.
Flexible deployment options: Hasura can be deployed using a range of options, including Docker containers, Kubernetes, and Heroku.

Overall, Hasura simplifies the process of building and managing APIs, which can save businesses and developers a significant amount of time and effort.

Getting Started with Hasura

Setting up a Hasura account

To get started with Hasura, you'll first need to create an account here. You can sign up for a free account on the Hasura website, which provides access to a range of features and tools.

Once you've signed up, you'll be taken to the Hasura dashboard, which provides an overview of your projects and allows you to create new projects.

Creating a new project

To create a new project in Hasura, click the "Create a new project" button on the dashboard. You'll be prompted to provide a name for your project and choose a database type.

Hasura supports a range of databases, including PostgreSQL, MySQL, and SQL Server. If you already have a database, you can connect it to Hasura by providing the connection details.

Overview of the Hasura console

Once you've created a project, you'll be taken to the Hasura console, which provides an interface for managing your project. The console is divided into several sections, including:

Data: Allows you to define data models and relationships, and manage your data sources.

GraphQL: Provides an interface for querying your data using GraphQL.

Events: Allows you to create and manage real-time subscriptions and triggers.

Actions: Provides an interface for defining custom API actions.

Remote Schemas: Allows you to integrate with external APIs using remote schemas.

Settings: Provides a range of settings and configuration options for your project.

Building GraphQL APIs with Hasura

Defining data models and relationships

One of the key features of Hasura is its ability to define data models and relationships using a user-friendly interface. To define a new data model, navigate to the "Data" section of the Hasura console and click the "Create" button.

You can then define the fields for your data model, set data types, and add constraints. Hasura supports a range of data types, including text, integers, booleans, and timestamps.

Once you've defined your data models, you can define relationships between them. For example, if you have a "Users" data model and a "Posts" data model, you can define a relationship between them so that each user can have many posts.

Querying data with GraphQL

Hasura provides a GraphQL API that allows you to query your data using GraphQL. To use the GraphQL API, navigate to the "GraphQL" section of the Hasura console and use the GraphiQL interface to run queries.

Hasura automatically generates GraphQL types and queries based on your data models, making it easy to get started with querying your data. For example, if you have a "Users" data model, you can query all users using the following GraphQL query:

query {
  users {
    id
    name
    email
  }
}

Real-time subscriptions

Hasura also provides real-time subscriptions, which allow you to build real-time applications that can respond to events as they happen. To create a real-time subscription, navigate to the "Events" section of the Hasura console and create a new subscription.

You can then define the criteria for your subscription, such as when a new record is added to a data model. Hasura will automatically send updates to the subscription whenever the criteria are met.

Custom API actions

Hasura also provides the ability to define custom API actions using its "Actions" feature. This allows you to define custom business logic and integrate with external APIs.

To define a new action, navigate to the "Actions" section of the Hasura console and create a new action. You can then define the input and output types for your action, and write custom code to implement the action.

Overall, Hasura provides a powerful and user-friendly platform for building GraphQL APIs. Its range of features and tools, including data modeling, real-time subscriptions, and custom API actions, make it an excellent choice for businesses and developers looking to build scalable and secure APIs.

Deploying and Scaling Hasura

Deploying Hasura to production involves creating an environment that can support the application's needs. It is essential to have a scalable, secure, and stable environment that can handle the application's traffic.

Hasura supports multiple deployment options that provide a streamlined way to deploy, manage, and scale your Hasura application.

Hasura Cloud

Hasura Cloud is the easiest and most streamlined way to deploy your Hasura application. With Hasura Cloud, you can easily deploy, manage, and scale your Hasura application without worrying about infrastructure or DevOps tasks.

Hasura Cloud provides a range of features, including automatic scaling, real-time monitoring, and seamless integration with other cloud providers. It also provides a user-friendly interface for managing your Hasura application and simplifies the process of deploying your application to production.

If you want to learn more about Hasura Cloud you can do it here.

Kubernetes

If you're comfortable with Kubernetes, you can also deploy Hasura to a Kubernetes cluster. Hasura provides official Helm charts and Kubernetes manifests for deploying your application to Kubernetes.

Deploying your application to Kubernetes provides more control over your infrastructure and allows you to scale your application based on demand. However, it requires more DevOps expertise and may be more time-consuming to set up than using Hasura Cloud.

Docker Compose

For smaller deployments or local development, you can deploy Hasura using Docker Compose. Hasura provides official Docker images that can be used with Docker Compose to deploy your application.

Using Docker Compose allows you to easily spin up a local instance of your Hasura application for testing and development. However, it's not recommended for production deployments due to its limited scalability and lack of production-grade features.

Self-Hosted

If you prefer to manage your own infrastructure, you can self-host Hasura. Hasura can be deployed to a wide range of platforms, including virtual machines, containers, and bare-metal servers. Self-hosting gives you complete control over your infrastructure, but it also requires more effort and resources to set up and manage. You can find more information on how to self-host Hasura in the official documentation here.

If you're looking for a suitable hosting provider check out my cloud hosting series here.

Scaling Hasura

Hasura can handle a significant amount of traffic, and it's easy to scale up or down depending on your application's needs.

With Hasura Cloud, scaling is automatic, and you don't have to worry about managing servers or infrastructure. Hasura Cloud will scale your application based on the traffic and load it's receiving.

With Kubernetes or self-hosting, you have to configure your environment to handle scaling. Kubernetes provides automatic scaling, but you need to configure it correctly. Self-hosting requires manual scaling, which can be time-consuming and error-prone.

Collaborating and Managing Teams with Hasura

Collaboration and teamwork are essential to building and managing a successful application. Hasura provides several tools that make it easy to collaborate and manage teams.

Hasura Console

Hasura Console is a web-based interface that allows you to manage your Hasura application's data and metadata. The console provides a range of features, including real-time data editing, metadata management, and version control.

With the console, multiple team members can collaborate on the same Hasura application, and changes can be tracked and managed.

Hasura Migrations

Hasura Migrations allow you to manage changes to your database schema in a collaborative and version-controlled way. Migrations are a set of SQL statements that can be executed to modify your database schema.

With Hasura Migrations, you can track changes to your schema and easily share them with your team members. Migrations can be version controlled, making it easy to collaborate and manage changes to your database schema.

Hasura Actions

Hasura Actions provide a way to extend Hasura's GraphQL API with custom business logic. With Hasura Actions, you can execute arbitrary code and integrate with external services.

Hasura Actions can be used to implement complex business workflows and integrate with external systems. Actions can be version controlled and managed, making it easy to collaborate and manage your application's functionality.

Hasura Permissions

Hasura Permissions provide a way to manage access control to your Hasura application's data. With Hasura Permissions, you can define fine-grained access control rules that restrict or grant access to your application's data.

Permissions can be defined on tables, columns, and rows, making it easy to manage access to your application's data. Permissions can also be version controlled, making it easy to collaborate and manage access control rules.

Monitoring and Analytics with Hasura

Monitoring and analytics are essential to ensuring the smooth operation and optimal performance of your Hasura application. Hasura provides several tools that make it easy to monitor and analyze your application's performance.

Hasura Metrics

Hasura Metrics is a built-in monitoring solution that provides real-time metrics for your Hasura application. With Hasura Metrics, you can monitor the performance of your application and quickly identify any performance bottlenecks.

Hasura Metrics provides a range of metrics, including query latency, query count, and error rates. You can use these metrics to identify areas where your application can be optimized and improved.

Hasura Tracing

Hasura Tracing is a tool that allows you to trace the execution of your Hasura GraphQL API. With Hasura Tracing, you can identify performance bottlenecks and optimize your application's performance.

Hasura Tracing provides a detailed view of each GraphQL query and its execution time. You can use this information to optimize your database queries and improve your application's performance.

Hasura Logs

Hasura Logs provide a detailed view of your application's activity and performance. With Hasura Logs, you can track errors, monitor performance, and identify potential issues.

Hasura Logs provide a range of logs, including server logs, query logs, and error logs. You can use these logs to troubleshoot issues and optimize your application's performance.

Use Cases for Hasura

Hasura is a versatile tool that can be used in a wide range of use cases. Here are some examples of how you can use Hasura in your projects:

Building Real-time Applications

Hasura makes it easy to build real-time applications that require data to be updated in real-time. You can use Hasura to build chat applications, real-time dashboards, or multiplayer games that require real-time updates.

Hasura provides real-time subscriptions, which allow clients to subscribe to changes in the database. With Hasura subscriptions, you can build real-time applications that are scalable, reliable, and efficient.

Building Microservices

Hasura can be used to build microservices that communicate with each other using GraphQL APIs. Hasura provides a centralized GraphQL API that can be used to access data from multiple microservices.

With Hasura, you can build microservices that are scalable, decoupled, and easy to maintain. Hasura's GraphQL API provides a unified interface that makes it easy to access data from multiple microservices.

Building Serverless Applications

Hasura can be used to build serverless applications that can be deployed on platforms like AWS Lambda or Google Cloud Functions. Hasura provides a GraphQL engine that can be used to build serverless applications that require access to data.

With Hasura, you can build serverless applications that are scalable, cost-effective, and easy to maintain. Hasura's GraphQL API provides a unified interface that makes it easy to access data from serverless functions.

Building Progressive Web Applications

Hasura can be used to build progressive web applications (PWAs) that are fast, reliable, and responsive. Hasura provides a GraphQL API that can be used to access data from the backend.

With Hasura, you can build PWAs that are optimized for performance, offline usage, and mobile devices. Hasura's GraphQL API provides a unified interface that makes it easy to access data from the backend.

Conclusion

Hasura is a powerful tool that simplifies the process of building scalable and efficient applications. With its real-time subscriptions, centralized GraphQL API, and easy-to-use interface, Hasura makes it easy to build real-time applications, microservices, serverless applications, and progressive web applications.

The features provided by Hasura make it an excellent choice for developers who want to build modern applications with real-time capabilities. Whether you're building a chat application, a real-time dashboard, or a multiplayer game, Hasura's real-time subscriptions and GraphQL API make it easy to build scalable and reliable applications.

Moreover, Hasura's support for microservices and serverless functions makes it an excellent choice for developers who want to build scalable and efficient applications. With Hasura, you can easily build microservices that are decoupled, scalable, and easy to maintain. Similarly, Hasura's GraphQL API makes it easy to access data from serverless functions and build serverless applications that are scalable and cost-effective.

In conclusion, Hasura is a powerful tool that simplifies the process of building modern applications. Its features make it easy to build real-time applications, microservices, serverless applications, and progressive web applications. Whether you're building a new application or migrating an existing one, Hasura can help you build scalable and efficient applications with ease.

Hasura Cloud: Building Scalable and Secure GraphQL APIs Made Easy

Sebastian Goscinski — Fri, 03 Mar 2023 13:03:18 +0000

Hasura Cloud is a fully managed GraphQL API platform that simplifies and streamlines the process of building, deploying, and managing GraphQL APIs. It enables developers to build scalable and secure GraphQL APIs with minimal effort, allowing them to focus on developing their applications rather than managing their infrastructure. In this blog post, we'll explore the features and benefits of Hasura Cloud, and how it can help businesses and developers.

Easy Set-Up and Deployment

One of the main benefits of Hasura Cloud is that it makes setting up and deploying GraphQL APIs easy and fast. It offers a range of deployment options, including Docker containers, Kubernetes, and Heroku. Additionally, Hasura Cloud provides a range of templates and examples that can help developers get started quickly.

Real-Time GraphQL Subscriptions

Hasura Cloud provides real-time GraphQL subscriptions, which enable developers to build real-time applications that can respond to events as they happen. This feature is particularly useful for building chat applications, stock market apps, or any other application that requires real-time updates.

Automated Security and Scaling

Hasura Cloud provides automated security and scaling features, which ensure that your APIs are secure and scalable. Its security features include rate limiting, role-based access control, and end-to-end encryption. Its scaling features include automatic load balancing, auto-scaling, and horizontal scaling.

Collaboration and Team Management

Hasura Cloud enables collaboration and team management, which allows multiple developers to work on a project simultaneously. Its collaboration features include shared databases, version control, and team management tools. Additionally, Hasura Cloud integrates with popular development tools such as GitHub and GitLab.

Advanced Analytics and Monitoring

Hasura Cloud provides advanced analytics and monitoring features, which enable developers to monitor and optimize the performance of their APIs. Its monitoring features include error tracking, latency tracking, and request tracking. Additionally, Hasura Cloud provides a range of analytics features, including usage tracking, API performance monitoring, and user behavior analytics.

Final Thoughts

Hasura Cloud is a powerful and flexible platform that simplifies the process of building, deploying, and managing GraphQL APIs. Its easy set-up and deployment, real-time subscriptions, automated security and scaling, collaboration and team management, and advanced analytics and monitoring features make it an excellent choice for businesses and developers who are looking to build scalable and secure GraphQL APIs. If you're looking to simplify the process of building and managing GraphQL APIs, Hasura Cloud is definitely worth considering.

Next.js & TailwindUI insert Inter font family

Sebastian Goscinski — Fri, 03 Mar 2023 13:00:34 +0000

In this short post I will show you how to easily integrate the Inter font family for TailwindUI in Next.js.

Next.js Document setup

To integrate the Inter font family into your Next.js application you have to create a custom document page, just create the file _document.tsx and insert the following code.

import Document, { Html, Head, Main, NextScript, DocumentContext } from 'next/document'

class MyDocument extends Document {
    static async getInitialProps(ctx: DocumentContext) {
        const initialProps = await Document.getInitialProps(ctx)
        return { ...initialProps }
    }

    render() {
        return (
            <Html lang="de" className="h-full">
                <Head>
                    <link
                        href="https://rsms.me/inter/inter.css"
                        rel="stylesheet"
                    />
                </Head>
                <body className="h-full">
                    <Main />
                    <NextScript />
                </body>
            </Html>
        )
    }
}

export default MyDocument

Tailwind Configuration

To activate the Inter font family in TailwindCSS you just have to extend the theme property and specify your own fontFamily using the following code.

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
  theme: {
    extend: {
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
    },
  },
  // ...
}