DEV Community: Fadare shola

How To Set Up A Secure AWS Client VPN With Okta Integration (SSO and Self-service) Using Terraform (PART 2)

Fadare shola — Sun, 09 Apr 2023 14:22:18 +0000

In the previous part of this article, we explored how to generate the SAML applications metadata using Okta. In this second part, we will continue with the next steps to set up an AWS Client VPN endpoint and associate it with a VPC network, and then configure it to authenticate Okta users. By integrating AWS Client VPN with Okta, we can ensure secure and centralized access control for remote users. Let's dive in and explore the remaining steps involved in setting up AWS Client VPN.

Requirements:

To follow along with this tutorial, you need to have the following prerequisites:

AWS Account
Terraform installed on your machine
An Okta account and Okta SAML application metadata .xml file from part 1

Steps:

The following steps will guide you through the process to complete the integration of Okta with AWS to setup a Client VPN using Terraform.

STEP 1: Generate the server and client certificates with keys to be uploaded to ACM

Clone the OpenVPN easy-rsa repo to your local computer and navigate to the easy-rsa/easyrsa3 folder.

$ git clone https://github.com/OpenVPN/easy-rsa.git
$ cd easy-rsa/easyrsa3

Initialize a new PKI environment.
$ ./easyrsa init-pki
To build a new certificate authority (CA), run this command and follow the prompts.

$ ./easyrsa build-ca nopass

Generate the server certificate and key.

$ ./easyrsa build-client-full client1.domain.tld nopass

Copy the server certificate and key and the client certificate and key to a custom folder. you can use the same custom folder for the downloaded provider's metadata.

STEP 2: Write the terraform to deploy necessary resources

In the main.tf file, this section creates two resources of aws_acm_certificate type to upload the server certificate and client certificate to the AWS Certificate Manager (ACM). The certificates are uploaded from the local computer. The private_key, certificate_body, and certificate_chain arguments specify the location of the certificate files, and the tags argument adds a name tag to the certificates for easy identification.

Create the SAML provider

To create a SAML provider, you need to provide the SAML metadata file in either XML or JSON format. You can either upload the file directly to AWS or provide the file path to the aws_iam_saml_provider resource in your Terraform configuration.

Create a Client VPN endpoint

The resource block "aws_ec2_client_vpn_endpoint" create the Client VPN endpoint. The endpoint is associated with the server certificate uploaded earlier. The authentication_options block defines the SAML provider ARNs for federated authentication and self-service authentication. The client_cidr_block argument specifies the IP address range for the Client VPN subnet, and dns_servers argument provides a list of DNS servers that will be used by clients to resolve domain names. The split_tunnel argument defines whether or not to split the client's internet traffic over the VPN. The self_service_portal argument specifies whether to enable or disable the self-service portal. The connection_log_options argument specifies whether to enable or disable connection logging.

Associate a target network

This section creates a resource of aws_ec2_client_vpn_network_association type to associate the Client VPN endpoint with a target network. The count argument is set to the number of subnets created in the next step, and the client_vpn_endpoint_id argument specifies the ID of the Client VPN endpoint created. The subnet_id argument specifies the ID of the subnet to which the endpoint is associated. The security_groups argument specifies the ID of the security group to apply to the endpoint. The ignore_changes argument is set to ignore any changes made to the subnet_id argument.

Add an authorization rule for the VPC

This block creates a resource of aws_ec2_client_vpn_authorization_rule type to add an authorization rule for the VPC. The client_vpn_endpoint_id argument specifies the ID of the Client VPN endpoint created. The target_network_cidr argument specifies the IP address range of the target VPC. The authorize_all_groups argument allows all clients in the target network to connect to the Client VPN endpoint.

Provide access to the internet to vpn user

This step creates a resource of aws_ec2_client_vpn_route type to provide internet access to the connected clients. The count argument is set to the number of subnets created. The client_vpn_endpoint_id argument specifies the ID of the Client VPN endpoint created. The destination_cidr_block argument specifies the IP address range of the internet.destination_cidr_block = "0.0.0.0/0" - This is defining the destination CIDR block for this route. In this case, it is "0.0.0.0/0", which means all traffic will be routed through this VPN.

Verify security group requirements

This step creates a resource of aws_security_group type to verify security group requirements. The vpc_id argument specifies the ID of the VPC created in previous steps. The name argument assigns a name to the security group. The ingress and egress blocks define inbound and outbound rules for the security group, respectively. The inbound rule allows UDP traffic on port 443 from any source IP address.

To properly organize the project, I created a separate terraform file(vpc.tf) that contains all resources associated with creating the VPC and Subnet to which the VPN Client is connecting to.



resource "aws_vpc" "main" {

  cidr_block = "172.20.0.0/16"

enable_dns_hostnames = true

  enable_dns_support = true

  instance_tenancy = "default"

  tags = local.global_tags

}

resource "aws_default_security_group" "default" {

  vpc_id = aws_vpc.main.id

egress {

    from_port = 0

    to_port = 0

    protocol = "-1"

    cidr_blocks = ["0.0.0.0/0"]

  }

tags = local.global_tags

}

resource "aws_subnet" "sn_az" {

  count = length(local.availability_zones)

availability_zone = local.availability_zones[count.index]

vpc_id = aws_vpc.main.id

  map_public_ip_on_launch = false

cidr_block = cidrsubnet(aws_vpc.main.cidr_block, 5, count.index+1)

}

resource "aws_internet_gateway" "igw" {

  vpc_id = aws_vpc.main.id

}

resource "aws_route_table" "rt" {

  vpc_id = aws_vpc.main.id

route {

    cidr_block = "0.0.0.0/0"

    gateway_id = aws_internet_gateway.igw.id

  }

}

resource "aws_route_table_association" "rt_assoc" {

  count = length(aws_subnet.sn_az)

route_table_id = aws_route_table.rt.id

  subnet_id = aws_subnet.sn_az[count.index].id

}

data "aws_availability_zones" "available" {

  state = "available"

}

locals {

  region = "us-east-2"

  global_tags = {

    "environment" = "vpn-example"

  }

  availability_zones = sort(data.aws_availability_zones.available.names)

}

STEP 3: Run terraform commands to deploy the resources to AWS

cd into the directory containing the terraform files and run the terraform commands to deploy the VPN to AWS

$ terraform init
$ terraform plan
$ terraform apply

STEP 4: Download the client config from the AWS console or the user Self-service portal

They are two way to get the Client Configuration

The AWS console

The Self-service portal for end users

Login to the service portal with the link
LINK: https://self-service.clientvpn.amazonaws.com/endpoints/Client VPN endpoint ID
Note: End users will the okta Verify app to complete the login to generate login MFA code

STEP 5: Download the Client VPN app either from the self-service page or the link below

Download link: https://aws.amazon.com/vpn/client-vpn-download/

STEP 6: Configure the VPN app by adding the VPN client configuration that was downloaded from the self-service page

To connect using the AWS provided client for Windows

Open the AWS VPN Client app.
Choose File, Manage Profiles.
Choose Add Profile.

The Display Name can be Anything

STEP 7: Verify the connection to the VPC by checking that the “Connected” text shows above the display name.

Thanks for reading.

You can find the module to this project on my GitHub Page.

Visit Part 1 if you missed it

Please like, comment and share to help improve this article.

How To Set Up A Secure AWS Client VPN With Okta Integration (SSO and Self-service) Using Terraform (PART 1)

Fadare shola — Sat, 08 Apr 2023 11:30:26 +0000

This article is going to be a two part series, this first part demonstrates how to deploy the SAML application to Okta in order to generate provider .xml file and the second part creates all the required AWS resources and deploys the Client VPN to AWS using terraform. This is really an interesting project for me and i'm so sure it will be useful to someone out there.

What is a VPN

Virtual Private Networks (VPNs) are essential for secure remote access to company resources. AWS provides a service called AWS Client VPN that allows users to access resources within a Virtual Private Cloud (VPC) securely. In this article, we will demonstrate how to create a Client VPN in AWS using Terraform and integrate it with Okta for authentication and self service.

Random

Personally, before I embark on a terraform project using any provider, I make sure that I am convenient using their services on the web console before automation and okta is not an exception, so if you are a beginner i will advise you understand the manual process before automation to organize your thought on how find and use the right terraform resources.

But if you are familiar with Okta and AWS you can just skip the manual step and go straight to write the terraform configuration.

Step 1: Okta account configuration

To start, we need to configure Okta as our Identity Provider (IdP). If you don't have an Okta account, you can sign up for a free developer account.

Login to your Okta account to get the organization name, base url and api token. The org_name and base_url can be gotten from the url after log in (check the image below)
For my test environment account, check the image

org_name = "trial-7458580"
base_url = "okta.com"

And to get the api key

Click on the “Admin” button
At the left-hand nav bar,Click “Security” and under security click on the “API” tab
Click on the “Tokens” tab and click “Create Token” to get your token

Step 2: Okta Terraform Configuration

The Okta provider is used to manage authentication and authorization for applications and services in the cloud. In this code snippet, the provider is being configured with the required parameters, such as the organization name and base URL. Additionally, an API token is provided for testing purposes, which can be generated from the Okta security page. This code demonstrates the ease of integrating Okta into your infrastructure code, allowing for efficient and secure management of your cloud applications.

Creating the SAML applications in order to download the provider's .xml file to be uploaded to aws

The terraform file will be creating two SAML applications, a SAML application for single sign-on (SSO) and another SAML application to access the AWS Self Service Page. The below section of the code is used to create a SAML application for single sign-on (SSO) VPN authentication. Specifically, it is creating an Okta SAML application for AWS Client VPN. The okta_app_saml resource is used to define the configuration of the application, including the label, SSO URL, recipient, destination, audience, subject name ID template, response signing, signature and digest algorithms, authentication context class reference, and self-service accessibility. Additionally, it includes an attribute statement for specifying group information and a lifecycle block to ignore changes to the groups attribute. The code is designed to help streamline the process of setting up SSO VPN authentication.

This section creates a SAML application for self-service, this enables users to download the latest version of the application after any administrator modification or updates to the network

Creating a group and assigning the apps to the group

The first resource block creates an Okta group that can be used to organize users within an application. The Okta_group resource requires a name and a description to be provided. The name and description help identify the group in the Okta console and provide a brief description of the group's purpose.

The second and third resource blocks assign an Okta application to the group created in the first resource block. The Okta_app_group_assignment resource allows you to specify an Okta app_id and a group_id that the application should be assigned to. This assignment enables all users within the group to access the assigned application.

Creating app users

This block creates Okta users. The Okta_user resource requires an email address, first name, last name, login, and password to be provided. The login is usually set to the user's email address, and the password is provided in plain text. For security purposes, it's recommended to use a secure password and a Terraform variable to store the password. You can also enable password change inside the this resource

Adding the users to the group with access to the apps

This resource block adds users to the group created. The Okta_group_memberships resource requires a group_id and a list of user ids to be provided. Once the users are added to the group, they will have access to any applications assigned to that group.

STEP 3: Run terraform commands to create okta resources

cd into the directory —- okta-module/ and run the terraform commands

$ terraform init
$ terraform plan
$ terraform apply

STEP 4: Log in to Okta admin account to copy the App metadata

The okta terraform config creates two applications on okta.

The self-service app
The SSO app

Copy the Self service and SSO metadata of the provider. These two are for the different apps created on okta

To download the metadata for both

Go to “applications”
select one of the apps created, then click on “Sign On” tab

Copy the Metadata URL and paste in the browser to save and download it with the .xml extension

Fantastic, we now have the SAML application metadata ready to be uploaded to AWS as the provider's SAML file, wooray. The image below shows how the metadata is being uploaded to AWS using the "aws_iam_saml_provider" resource, this will be explained in detail in Part 2.

Thanks for reading.

You can find the Okta module in my Github page.

Please like, comment and share to help improve this article.

How To Recover Access To EC2 Instance After Losing Pem File(SSH Keys) 2022

Fadare shola — Fri, 08 Jul 2022 18:00:42 +0000

Losing credentials or log-in details to any platform or Infrastructure can be frustrating and can have a lot of consequences which is why we must protect our security credentials with all intentions.

Imagine losing credentials to your vault and you can't access your money

Never lost my ssh keys tho. So this article is a request from someone and I'm writing just to show a walk-through of how to recover missing Pem file to an AWS instance. let's go

RECOVERING ACCESS TO MY EC2 INSTANCE AFTER LOSING PEM FILE

For Pem file recovery to be possible, the lunched instance with the missing Pem file must be an EBS-Backed Instance because it is not possible on an instance backed by an instant store.

Assume that your instance with lost Pem file is "Lost pem server"

I. To confirm the backed-storage type

Click/Check the instance.
Select the “storage” tab.

II. Launch a Recovery Instance

Launch the “Recovery Instance” in the same AZ as the “Lost pem server”
To Launch a New Instance in the same Availability Zone as the instance(Lost pem server) with the missing Pem file….Make sure to check which AZ the instance is running(The above is running in us-east-2a).
Select the same network(VPC) and subnet as the old instance(Lost pem server).

III. Create key pair for the new instance(Recovery server) and connect to it using ssh. Be sure you can connect to the instance.

IV. Now stop the old instance(Lost pem server).

V. Detach the EBS volume connected to the “Lost pem server”.

Click on the instance with lost Pem and select the “Storage” Tab.
Scroll down to blocked devices and click on the ID for the Root Device. In my case, the root device is dev/sda1.

Make sure the Root Storage is still selected, then click on Action
Finally, select “Detach volume”

Go to “volumes” under EBS(Elastic Block Store) and select the volume you previously detached from the “Lost pem server”

Select the volume and click “Action”
Select “Attach Volume”.

Select the recovery server(Recovery Server).

VI. Go back to the shh terminal to the “Recovery server” and check the EBS volume
NOTE: The attached EBS volume won’t mount automatically, so you have to mount it.

Go to your terminal and ssh into the Recovery server. In my case, I’m using WSL in visual studio.

Enter the following commands

I. Optionally: you might want to copy the pem file from where it is to the .ssh folder

cp /mnt/c/Users/YourName/desktop/pem/recovery.pem ~/.ssh/recovery.pem

II. Connect to the instance using SSH

III. To check the list of storage on the device to see if the attached EBS was mounted or not. Though it doesn’t mount automatically.

lsblk

NOTE: The attached EBS(XVDF) has not been mounted to any path as you can see in the screenshot above.

IV. Also, confirm that the attached EBS is not empty because u can’t mount an empty EBS.

sudo file -s /dev/xvdf

Output: /dev/xvdf: DOS/MBR boot sector, extended partition table (last)

Output like this means the drive is not empty, so you can go ahead and mount.

V. Create a temporary directory to mount the EBS volume(for the Lost pem server) in the Recovery server.

sudo mkdir /mnt/tempvolume

The path = /mnt/tempvolume

VI. Mount the storage on path /mnt/tempvolume. Mount the drive with a number at the end “/dev/xvdf1”

/dev/xvdf1 is the disk to be mounted.

sudo mount /dev/xvdf1 /mnt/tempvolume

VII. Check if the EBS has mounted

lsblk

To check the list of storage on the device again.

VIII. Copy the SSH key of your “Recovery server” into the attached drive belonging to the “Lost pem server”

cp .ssh/authorized_keys /mnt/tempvolume/home/ubuntu/.ssh/

NOTE: Ubuntu in path /mnt/tempvolume/home/ubuntu/.ssh/ is the server name, it can be ec2-user if u launched linux server.

IX. Check the list of contents in the temporary location on the storage you copied the key to.

ls -lah /mnt/tempvolume/home/ubuntu/.ssh/

The key “Authozied_keys” is now in the folder you copied it to.

X. Unmount the attached storage from the “Recovery server so you can attach it back to the “Lost pem server”.

sudo umount /mnt/tempvolume/

XI. Check if the disk has unmounted.

lsblk

The mount point of /dev/xvdf1 is no longer /mnt/tempvolume

XII. Now detach the attached “Lost pem EBS” from the “Recovery server” to attach it back to its original server “Lost pem server”.

XIII. Attached the EBS to the “Lost pem server” and edit the name to /dev/sda1 and save.

To confirm the time the EBS was attached, check “Attachment time”

XIV. Connect to the “Lost pem server” with the key of the “Recovery Server”.

ssh -i "ggfgvfv.pem" ubuntu@ec2-3-145-xxx-92.us-east-2.compute.amazonaws.com

XV. Connect to the “Lost pem server” with the key of the “Recovery Server”.

NOTE: Don’t forget to terminate the instance if it’s not a free tier instance to avoid extra cost.

Thank you and next time don't misplace your key 😄

How To Identity Components In A Design Mockup To Build A React Application

Fadare shola — Sat, 28 May 2022 17:15:01 +0000

Are you curious about React JS as a JavaScript developer and can’t wait to start building something interesting with it? If YES let's journey together.

Now let’s talk about React

What is React

React is a JavaScript library for building user interfaces. It is about building JavaScript applications that can scale. React apps don’t run on the server they run in the browser.

Now let jump into WHY we use React.

Why use React

As your application becomes huge and complex, targeting elements in the DOM of your application becomes more stressful. Also, the UI state of the application becomes difficult to manage with vanilla JavaScript. Therefore considering React JS is an efficient way of building scalable JavaScript applications.

HOW TO IDENTIFY COMPONENTS IN A DESIGN MOCKUP

Wow, now you know what React JS is and why you should build your applications with it. To build applications with React you need to know and understand the steps required to convert mockups into making a React application but this lesson is on Splitting the Mockup Into “useful Components”. The word “useful components” is deliberate as any section can be a component but knowing when not to make component is also important.

Split the mockup into components

Pay attention here, To build a React application you have to break down the UI(User Interface) design into what is referred to as components.

What are components

Components allow you to write reusable, manageable and maintainable code. React uses components to build user interfaces. Working with components makes it easier to work with teams and also makes it easier to manage the code.

Now take a look at the image below, it’s a regular web page with a header, sidebar, headline and article content section. These sections of the page are what are referred to as components(the header component, sidebar component etc.) from the UI point of view.

NOTE: If you are trying to divide a mockup page into components, One technique to be used is the single responsibility principle which means that a component should ideally only do one thing. If the component becomes complex, it should be decomposed into smaller subcomponents which also perform one function.

For example, the header, sidebar, headline, and article content section component displays only the header, sidebar, headline and article content section respectively.

In addition, if you are going to display JSON or Object data then break down your UI into components, where each component matches one piece of your data model. Let me use the example on the official React page to demonstrate the understanding of how to break down components.

Example: Assuming you have been given the mockup design and with an API endpoint with the data below.

Mockup design

Sample data

Now let’s analyze the mockup with respect to the given JSON data to determine our components

I personally take these steps to determine components in a mockup

In no particular order

Draw a box around the contents of the mockup that are strictly values from the JSON data.
Draw a box around every section of the UI that are reusable.
Multiple values from the JSON or Object data should be in a single box if there are to be displayed as one content(eg. The product row).
Draw a box around inputs of forms(should contain all input types needed).
Wrap smaller boxes with bigger ones in case of subcomponents. Static content and non-reusable can be part of a wrapping box not as the box on its own.
Cover all contents in one outer box which represents the outermost component.

After carefully analyzing the mockup and JSON data, you should have something like the image below.

The numbers in the image correspond to the numbers below.

FilterableProductTable (orange box): The outer box for the entire example
SearchBar (blue box): All user’s input box
product table (green box): Displays and filters the data collection based on user input
ProductCategoryRow (turquoise box): The heading for each category
ProductRow (red box): The row for each product

Now that you have been able to identify the components from the UI point of view, the next thing to do is to start coding i.e turning the components into React components. In the next article we will discuss on how to code a React component with examples but before then let's know what a React component is in it simplest form.

Basics of writing a React component

A React component is simply a JavaScript function with the function name starting with Uppercase. The function also returns the HTML code you want to return to the DOM. In React the HTML to be returned is regarded as jsx(note the use of className below as a substitute for class in normal HTML) just to remind you that it isn’t pure HTML but jsx(JavaScript XML).

Basic React component sample



function Person(){

    return(
        <div className="person">
            <h1>James</h1>
            <p> Your age is: 20</p> 
        </div>
    );
}

Thanks for reading and hopefully someone finds this useful.
Please leave a comment to help improve this article.

Quick Steps To Host A React Application Using Firebase

Fadare shola — Mon, 23 May 2022 23:18:11 +0000

Yeah, you finished a React side project and you can't wait for it to be live. Don't stress Firebase is here to put a smile on your face. Oh Firebase is superman, so you know yourself.

What is Firebase

Let me quickly introduce Firebase that's if you have never heard of it.

Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world.

But today we will be making use of the Firebase hosting service with step-by-step guide to deploy a react application. let's go

Create a firebase account if you have not or login to firebase if you have one.
https://firebase.google.com/
Click “Go to console” at the top right corner of the home page.
Click “Add Project” to add a new project and follow the steps

Enter the project name.
Turn On and enable google analytics for the project.
Choose “Default account for firebase” as the google analytics account.
Click “Create project”

Install firebase tools globally on your computer using the command.

npm install -g firebase-tools

Note : node.js must be installed on your system

Now login to firebase in your terminal, to do this you must be inside the root directory of your React project before you enter the login command.

firebase login

When you see the login command response “Allow Firebase to collect CLI usage and error reporting information” enter YES.

When you enter yes it will redirect you to the Google authentication/sign-in page, then click “ALLOW” to login successfully.

Run the react Build command on your application if you have not, to ensure that you are hosting the build version of your application.

npm run build

Now initialize Firebase in your project and answer the questions that follows

firebase init

Are you ready to proceed? (Y/n) YES
Which Firebase features do you want to set up for this directory?

To select an option
- Use up and down arrow to navigate.
- Press Space to select features
- then Enter to confirm your choices

Selected option > Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys.

Next select “use exiting project” in order to pick the project created initially in the Firebase console. Select the project you want
Next question is : What do you want to use as your public directory? (public) build

Type “build” as the answer

Next question is : Configure as a single-page app (rewrite all urls to /index.html)? (y/N)
Type “y” as the answer
Next question is :Set up automatic builds and deploys with GitHub? (y/N)

Type “N” as the answer

Next question is :File build/index.html already exists. Overwrite?

Type “N” as the answer

Run the deploy command to host the application on firebase.

Firebase deploy

Wow that was easy and fast.

Thanks for reading and please leave a comment to help improve this article