DEV Community: Nemi Shah

Adding login to your SwiftUI app with SuperTokens and NodeJS — Part 1

Nemi Shah — Tue, 20 Dec 2022 08:31:19 +0000

Most modern day mobile applications involve authentication in some way, this usually involves asking your users to login to your app before they get to use it. In this article we will cover how to build a simple email password based login system for SwiftUI.

A basic login system would include the following:

A form where the user can enter their information
An API layer that will verify the credentials and log the user in
A way for the frontend to verify that the user is logged in and can access the app

For the API layer and authentication we will use an Express server that integrates with SuperTokens. SuperTokens is an open source user authentication solution, it makes building authentication super simple and provides SDKs for various languages (we will use the NodeJS one for this article)

Building the app

Lets start with a bare bones SwiftUI app, we need two screens: The login screen and a home screen.

Lets start with the login screen:

struct LoginView: View {
    @State private var enteredEmail = ""
    @State private var enteredPassword = ""
    @State private var isSigningUp = false

    var body: some View {
        VStack {
            Text(self.isSigningUp ? "Sign Up" : "Sign In")
                .font(.system(size: 26, weight: .medium))

            TextField("Email", text: self.$enteredEmail)
                .padding(.vertical, 12)
                .padding(.horizontal, 12)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .strokeBorder(
                            Color.black.opacity(0.4),
                            style: StrokeStyle()
                        )
                )
                .foregroundColor(Color.black)

            SecureField("Password", text: self.$enteredPassword)
                .padding(.vertical, 12)
                .padding(.horizontal, 12)
                .overlay(
                    RoundedRectangle(cornerRadius: 8)
                        .strokeBorder(
                            Color.black.opacity(0.4),
                            style: StrokeStyle()
                        )
                )
                .foregroundColor(Color.black)
                .padding(.top)

            Button(action: {
                self.isSigningUp = !self.isSigningUp
            }, label: {
                Text(self.isSigningUp ? "Already have an account?" : "Dont have an account?")
            })
            .padding(.top, 8)

            Button(action: {

            }, label: {
                Text(self.isSigningUp ? "Sign Up" : "Sign In")
                    .padding(.vertical, 12)
                    .padding(.horizontal, 10)
            })
            .frame(minWidth: 0, maxWidth: .infinity)
            .background(Color.blue)
            .cornerRadius(8)
            .foregroundColor(Color.white)
            .padding(.top)
        }
        .padding()
    }
}

This will render the following:

Integrating with SuperTokens

The home screen of the app will need a way to check if a user is logged in and need access to some information about the user, so before we build the screen we will first build the authentication layer using SuperTokens.

SuperTokens provides a command line tool that lets us get started quickly, you can refer to the official documentation to see additional options that you can configure and the different features you can use:

npx create-supertokens-app@latest

For the frontend framework you can choose any option since we will be using our SwiftUI app anyway, for the backend framework choose Node.js to generate an express app that uses SuperTokens. Once the tool is done it will generate a frontend and backend app under a folder names my-app , we will only use the backend folder for the sake of this article. Lets take a look at the generated code:

import express from "express";
import cors from "cors";
import supertokens from "supertokens-node";
import { verifySession } from "supertokens-node/recipe/session/framework/express";
import { middleware, errorHandler, SessionRequest } from "supertokens-node/framework/express";
import EmailPassword from "supertokens-node/recipe/emailpassword";
import Session from "supertokens-node/recipe/session";

supertokens.init({
    supertokens: {
        // this is the location of the SuperTokens core.
        connectionURI: "https://try.supertokens.com",
    },
    appInfo: {
        appName: "SuperTokens Demo App",
        apiDomain: "http://localhost:3001",
        websiteDomain: "http://localhost:3000",
    },
    // recipeList contains all the modules that you want to
    // use from SuperTokens. See the full list here: https://supertokens.com/docs/guides
    recipeList: [
        EmailPassword.init(),
        Session.init(),
    ],
});

const app = express();

app.use(
    cors({
        origin: "http://localhost:3000",
        allowedHeaders: ["content-type", ...supertokens.getAllCORSHeaders()],
        methods: ["GET", "PUT", "POST", "DELETE"],
        credentials: true,
    })
);

// This exposes all the APIs from SuperTokens to the client.
app.use(middleware());

// An example API that requires session verification
app.get("/sessioninfo", verifySession(), async (req: SessionRequest, res) => {
    let session = req.session;
    res.send({
        sessionHandle: session!.getHandle(),
        userId: session!.getUserId(),
        accessTokenPayload: session!.getAccessTokenPayload(),
    });
});

// In case of session related errors, this error handler
// returns 401 to the client.
app.use(errorHandler());

app.listen(3001, () => console.log(`API Server listening on port 3001`));

The generated code is a simple express application that uses the supertokens-node SDK to integrate email password login and session management. The SuperTokens SDK exposes a set of APIs that the frontend can call to implement the login functionality, to read more about how SuperTokens works you can refer to the how it works section of the documentation. Lets cover some of the major parts of the code:

supertokens.init initialises SuperTokens, connectionURI is used to connect to the core where all the logic for authentication resides. In the example above we use try.supertokens.com which is a demo core hosted by the SuperTokens team, when you’re ready to release your app make sure to change this URL by following the guide for using the managed service or self hosting the core yourself.

recipeList: [
    EmailPassword.init(),
    Session.init(),
],

This part of the code tells SuperTokens which modules you want to enable, for this example we enable the email and password login mechanism but we could also enable features such as user roles, email verification etc. You can refer to the official documentation to know all the features that can be used.

app.use(middleware());

// ...

app.use(errorHandler());

The middleware exposes all the APIs that SuperTokens can handle including the sign and sign up APIs that we will use in this example. The errorHandler lets the SuperTokens SDK handle some of the failures such as returning 401 when the user is not logged in.

app.get("/sessioninfo", verifySession(), async (req: SessionRequest, res) => {
    let session = req.session;
    res.send({
        sessionHandle: session!.getHandle(),
        userId: session!.getUserId(),
        accessTokenPayload: session!.getAccessTokenPayload(),
    });
});

This API can be used to display some information to the user, the verifySession middleware used in the example makes sure that the API logic is executed only if the user has a valid session (i.e they are logged in), and it will result in a 401 if they are not. Refer to the documentation to learn more about this. Note that this API is simply an example that is provided with the generated application.

Run npm run start in the backend directory to start the API server, at this point we can leave the backend server running and get back to our frontend. Note that we will be using our machine’s IP instead of localhost.

Adding SuperTokens to the iOS app

If you haven’t already, start with enabling Cocoapods for the app by running pod init.

pod 'SuperTokensIOS'

Add this to your Podfile and run pod install to install the iOS SDK for SuperTokens. We need to initialise SuperTokens, you want to make sure this is done at the starting point of your app:

import SwiftUI
import SuperTokensIOS

@main
struct LoginWithSuperTokensApp: App {
    init() {
        do {
            try SuperTokens.initialize(apiDomain: "http://192.168.29.87:3001")
        } catch {
            // Error initialising SuperTokens
        }
        URLProtocol.registerClass(SuperTokensURLProtocol.self)
    }

    var body: some Scene {
        WindowGroup {
            LoginView()
        }
    }
}

The above code snippet sets up session management network interceptors on the frontend. Our frontend SDK will now be able to automatically save and add session tokens to each request to your API layer and also do auto session refreshing

This is from the official docs, in essence initialising the SDK lets SuperTokens handle sessions for you and handle automatically refreshing them if the server returns 401. apiDomain tells SuperTokens where your API layer is hosted, since we have our server running locally we use the local IP address. By default SuperTokens considers that the auth APIs are exposed via the /auth route, if you want to change that refer to the documentation.

URLProtocol.registerClass(SuperTokensURLProtocol.self)

This adds the SuperTokens protocol to the list of interceptors for the default URLSession configuration so that all relevant requests are automatically handled by the SDK.

Implementing login

Let's revisit the login view and add the logic to sign in/sign up the user. First lets change the button to call either sign in or up depending on what the current UI state is:

Button(action: {
    if self.isSigningUp {
        signUp()
    } else {
        signIn()
    }
}, label: {
    Text(self.isSigningUp ? "Sign Up" : "Sign In")
        .padding(.vertical, 12)
        .padding(.horizontal, 10)
})

func signIn() {
    if self.enteredEmail == "" || self.enteredPassword == "" {
        return
    }

    var request = URLRequest(url: URL(string: "http://192.168.29.87:3001/auth/signin")!)
    request.httpMethod = "POST"
    request.addValue("application/json", forHTTPHeaderField: "Content-Type")

    let formFields: [[String : Any]] = [
        [
            "id": "email",
            "value": self.enteredEmail
        ],
        [
            "id": "password",
            "value": self.enteredPassword
        ]
    ]

    let body: [String: Any] = [
        "formFields": formFields
    ]

    let data =  try! JSONSerialization.data(withJSONObject: body)
    request.httpBody = data

    URLSession.shared.dataTask(with: request, completionHandler: {
        data, response, error in

        if data != nil, let json: [String : Any] = try? JSONSerialization.jsonObject(with: data!) as? [String: Any] {
            if json["status"] as! String == "OK" {
                // Sign In succeeded
            } else {
                print(json["status"])
            }
        }
    }).resume()
}

This will call the /auth/signin API that SuperTokens exposes on the backend. If you sign in with your email you will get a WRONG_CREDENTIALS_ERROR status in the response because a user with that email does not exist yet.

func signUp() {
  var request = URLRequest(url: URL(string: "http://192.168.29.87:3001/auth/signup")!)
  request.httpMethod = "POST"
  request.addValue("application/json", forHTTPHeaderField: "Content-Type")

  let formFields: [[String : Any]] = [
      [
          "id": "email",
          "value": self.enteredEmail
      ],
      [
          "id": "password",
          "value": self.enteredPassword
      ]
  ]

  let body: [String: Any] = [
      "formFields": formFields
  ]

  let data =  try! JSONSerialization.data(withJSONObject: body)
  request.httpBody = data

  URLSession.shared.dataTask(with: request, completionHandler: {
      data, response, error in

      if data != nil, let json: [String : Any] = try? JSONSerialization.jsonObject(with: data!) as? [String: Any] {
          if json["status"] as! String == "OK" {
              // Sign Up succeeded
          } else {
              print(json["status"])
          }
      }
  }).resume()
}

This will call the /auth/signup API that SuperTokens exposes on the backend. You can find a list of all APIs exposed by the SuperTokens SDK here.

Building the home screen

import SwiftUI
import SuperTokensIOS

struct HomeView: View {
    var body: some View {
        var doesSessionExist = SuperTokens.doesSessionExist()
        var text = "Session exists: \(doesSessionExist)"
        var userId = ""

        if doesSessionExist {
            do {
                userId = try SuperTokens.getUserId()
            } catch {

            }
        }

        return VStack {
            Text(text)
            Text("User ID: \(userId)")
        }
    }
}

SuperTokens provides some helper functions such as doesSessionExist , getUserId and signOut that can be used for some fundamental auth functionality. You can use doesSessionExist to check if a user has a valid session to protect parts of your app.

Showing the home screen by default

One last thing to do is to change the main app struct to show the home screen by default for logged in users:

var body: some Scene {
    WindowGroup {
        if SuperTokens.doesSessionExist() {
            HomeView()
        } else {
            LoginView()
        }
    }
}

And there you have it, you can very easily add login to your app using SuperTokens. In future articles we will cover how we can build a similar app but using passwordless and social login mechanisms instead of email password. If you’d like to learn more about the features SuperTokens provides and how they work visit their website.

SwiftUI: Reusable UI with Custom Modifiers

Nemi Shah — Thu, 08 Dec 2022 17:19:39 +0000

The ability to create custom view modifiers is a powerful feature in SwiftUI, in this article we will cover examples of how this feature can be used to make building UI so much easier. If you are not familiar with ViewModifiers in SwiftUI and how to create custom ones, you can read about it here

The goal with this article is to cover some of the different ways to create custom modifiers and styles in SwiftUI and how they can be used to make building UI more declarative while still achieving a clean and consistent final output. The final UI we want to build is:

Let's consider all the individual components on the screen:

Image: A standard image component with some corner radius
Texts: We have a title and a body text
Button: A full width button

Plain SwiftUI code

If you build this screen without any modifiers, the code would look something like this:

struct ContentView: View {
    var body: some View {
        VStack (alignment: .leading) {
            Image("feature")
                .resizable()
                .aspectRatio(contentMode: .fill)
                .frame(minWidth: 0, maxWidth: .infinity)
                .frame(height: 220)
                .cornerRadius(12)
                .padding(.bottom, 12)

            Text("Custom ViewModifiers in SwiftUI are the best!")
                .foregroundColor(Color("titleTextColor"))
                .font(.system(size: 20, weight: .bold))
                .padding(.bottom, 12)

            Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views")
                .foregroundColor(Color("bodyTextColor"))
                .font(.system(size: 14, weight: .medium))


            Spacer()
            Button(action: {

            }) {
                Text("Label")
                    .font(.system(size: 14, weight: .medium))
            }
            .frame(minWidth: 0, maxWidth: .infinity)
            .padding(.horizontal, 10)
            .padding(.vertical, 12)
            .background(Color.blue)
            .foregroundColor(Color.white)
            .cornerRadius(12)
        }
        .padding(.all, 16)
    }
}

There are a couple problems with this approach:

Styling for some of the elements (the title and details texts for example) would have to be duplicated
Changes to some of the common styling (element padding, corner radius etc) would have to be made in multiple places

Now you could solve this problem the UIKit way by creating custom views, but personally Im not a fan of this approach because it involved moving away from the built in Views and makes onboarding new team members more frictional. An easier way would be to define some universal view modifiers that can be applied instead of the styles themselves.

Lets break down the common styling we need:

Screen container: The screen itself has a universal padding, this is optional but I prefer having all screens have a universal style
Corner radius
Title and body texts
Full width: Items need to be able to fill the width of their parent (the button and the image in the above example)
Button styling
Image scaling

Custom View Modifiers

Lets start with the corner radius:

struct CommonCornerRadius: ViewModifier {
    func body(content: Content) -> some View {
        content
            .cornerRadius(12)
    }
}

This one is rather simple, it allows us to apply a universal corner radius for elements. This makes it easier to change app styles globally without having to create custom Views or having to make multiple changes across the codebase.

struct FullWidthModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .frame(minWidth: 0, maxWidth: .infinity)
    }
}

This one makes making full width views easier to implement, no more adding .frame manually!

struct TitleTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(Color("titleTextColor"))
            .font(.system(size: 20, weight: .bold))
    }
}

struct BodyTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .foregroundColor(Color("bodyTextColor"))
            .font(.system(size: 14, weight: .medium))
    }
}

This will allow common text styling, normally you would either create custom Text components or utility functions and adding UI components through code.

extension Image {
    func aspectFill() -> some View {
        self
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}

Alright, you got me…this isn't a custom view modifier but a simple extension. This is because ViewModifiers apple to the generic Views and some functions such as resizable only apply to images, using a combination of extensions and custom modifiers helps get around this.

struct FullWidthButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .fullWidth()
            .foregroundColor(Color.white)
            .font(.system(size: 14, weight: .medium))
            .padding(.horizontal, 10)
            .padding(.vertical, 12)
            .background(configuration.isPressed ? Color.blue.opacity(0.2) : Color.blue)

    }
}

struct FullWidthButton: ViewModifier {
    func body(content: Content) -> some View {
        content
            .buttonStyle(FullWidthButtonStyle())
    }
}

Finally this is for the button, note that while we could have simple created a ViewModifier to accomplish the same effect the button's appearance would not have changed when tapped. This is because setting .background on a button forces it to use that background in both tapped and untapped state. ButtonStyle lets us change the opacity of the button based on whether or not it is pressed.

Now for convenience I like making extensions that use these modifiers:

extension View {
    func commonCornerRadius() -> some View {
        modifier(CommonCornerRadius())
    }

    func fullWidth() -> some View {
        modifier(FullWidthModifier())
    }

    func title() -> some View {
        modifier(TitleTextModifier())
    }

    func body() -> some View {
        modifier(BodyTextModifier())
    }

    func fullWidthButton() -> some View {
        modifier(FullWidthButton())
    }
}

extension Image {
    func aspectFill() -> some View {
        self
            .resizable()
            .aspectRatio(contentMode: .fill)
    }
}

Now lets convert the code to use these instead of styling directly:

struct ContentView: View {
    var body: some View {
        VStack (alignment: .leading) {
            Image("feature")
                .aspectFill()
                .fullWidth()
                .frame(height: 220)
                .commonCornerRadius()
                .padding(.bottom, 12)

            Text("Custom ViewModifiers in SwiftUI are the best!")
                .title()
                .padding(.bottom, 12)

            Text("Custom ViewModifiers in SwiftUI let you create resuable styles that can be applied to all your views")
                .body()


            Spacer()
            Button(action: {

            }) {
                Text("Awesome")
            }
            .fullWidthButton()
            .commonCornerRadius()
        }
        .padding(.all, 16)
    }
}

Much cleaner! Now at first glance this feels like more code and effort than simply manually setting the styles but in the long run this will save a lot of effort. Personally this approach also encourages your app's style to be more consistent by relying more on common modifiers than on a view by view basis of styling.

And thats about it! Hopefully this helps you build your apps quicker and easier, another benefit is that these modifiers can be dropped into any of your apps and tweaked to match its style guidelines. Ive also been working on a library to take this even further, you can check it out here (PS: At the time of writing this the library is in a super early stage, in fact the repo is empty :p but stay tuned).

PS: In my free time I also freelance as a mobile dev, if you are looking to hire feel free to reach out!

https://www.fiverr.com/nkshah2

SwiftUI: What are ViewModifiers?

Nemi Shah — Sun, 04 Dec 2022 11:54:28 +0000

SwiftUI is quickly becoming the popular choice for making iOS apps, and one of the most common things you use is ViewModifiers. If you have worked with SwiftUI before reading this and don't know what ViewModifiers are, I guarantee you have used them before without realising it.

ViewModifiers are methods you call on the Views you use in your app to customise their appearance and behaviour. You use them to change colors and sizes, to add gestures, to add accessibility options etc to your Views, if you have ever used .background or .foregroundColor in your project, these are examples of ViewModifiers.

How do you use ViewModifiers?

Let's start by creating a project, I wont bore you with the whole process so just make sure to select SwiftUI instead of Storyboard when making your project.
The default View created for you already uses some modifiers so lets take a look at that

struct ContentView: View {
    var body: some View {
        VStack {
            Image(systemName: "globe")
                .foregroundColor(.accentColor)
            Text("Hello, world!")
        }
        .padding()
    }
}

The View above uses .padding and .foregroundColor.

.padding : Lets you specify the padding for your View, note that because we dont provide any values it applies the system default padding for all sides. You can specify the edges and values like this .padding(.top, 12) or .padding(.horizontal, 12) for example
.foregroundColor : Will set the foreground color for the view, affecting text colors, tints etc

Some common examples of built in modifiers are:

.frame : Used to change the size of a View
.font : Used to change the font family, size etc for a Text

Lets try making something ourselves, our target is to build a simple filled button

Before we start let's review the constraints we want to use on the button - Padding, Corner radius, Background Color.

Lets start by adding a simple button with some text:

Button(action: {
    // On click
}) {
    Text("Label")
}

This will render a simple text button:

After adding our modifiers:

Button(action: {
    // On click
}) {
    Text("Label")
        .padding(.horizontal, 20)
        .padding(.vertical, 14)
        .foregroundColor(Color.white)
}
.background(Color.blue)
.cornerRadius(14)

Custom View Modifiers

The example above is very simple but if your project had many Views with similar styles (common padding values, themed background colors etc) it can get very annoying very quickly to have to repeat the same modifiers. Fortunately SwiftUI lets you create your own custom modifiers.

Lets consider the example above, if you notice the button text doesn't exactly match what we were trying to build. Lets create a custom modifier for the button text:

struct ButtonTextModifier: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.system(size: 17, weight: .semibold))
            .lineSpacing(22)
    }
}

And lets apply this modifier to our button and voila:

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .modifier(ButtonTextModifier())

Now this way of using custom modifiers is perfectly fine, but personally I'm not a fan of having to use .modifier every time I want to apply a custom modifier. I prefer to create an extension to make this more convenient:

extension View {
    func buttonText() -> some View {
        modifier(ButtonTextModifier())
    }
}

And then use it this way:

Text("Label")
  .padding(.horizontal, 20)
  .padding(.vertical, 14)
  .foregroundColor(Color.white)
  .buttonText()

And thats a wrap! While the examples we covered were rather simple, ViewModifiers are extremely useful and the ability to make custom modifiers really makes them so much more powerful when building apps.