005 - Apple Wallet Passes End-to-End Implementation - Swift IOS & NodeJS

In this video we go all out with the full implementation of Apple Wallet Passes, with SwiftUI for the front-end, nodeJs for the backend, and firebase cloud storage for storage buckets.

Use Passkit-generator to generate the pass from your backend:

Download pass sample models:

Dowload WWDR certificate:

00:00 - intro & Demo
03:46 - Pass ID Certificate
06:37 - Project Setup
09:31 - Backend: Setting up nodeJS Project
10:38 - Backend: Preparing pass model files
14:36 - Backend: Generating certificates
19:02 - Backend: using passkit-generator
28:13 - App: calling generate pass
31:36 - App: downloading pass
32:20 - App: Displaying pass
34:30 - Result
__________________________________________________________________________

To get access to the source code in this video and support the channel check out my Patreon:

[AlexanderCerutti]

That's really awesome to see passkit-generator being used in a video tutorial. Right now I feel really satisfied of what I started 4 years ago and I'd like to thank you for using it!

Just a couple of things: first of all, Apple says that it is not required to save the pkpass file to a cloud storage or save it at all, because it is just a data representation. So, it could be just served as-is. But, I mean, everyone if free to do as it wishes :D

Second thing, authenticationToken is used when webServiceUrl is provided. Apple Wallet will ping your webServiceUrl, at some known endpoints, with the authenticationToken to setup the notification system / invalidation / whatever. So, in the scope of your video, they are not needed at all, because your cloud function doesn't provide support for these endpoints.

For the rest, great video! I'm open to any feedback and things to get improved on the library.
Have a great day, dude!

[setorblagogee]

This video was GOLD! Cut down the time I would have needed for this task by a lot.

[immuo]

I was desperate because I searched everything about pass but couldn't find a detailed implementation method, but now I found the answer here. thank you so much!!

[andrews]

This channel is criminally underrated!

[hairyharry]

Most detailed video of Apple Wallet Pass implementation.

[aj-vepw]

god bless you I could never have done this without this tutorial!!!

[FaysalBDev]

it was a nice tutorial, up until you skipped the backend programming phase...

[a-will]

This was really cool to watch! I'm not a developer but studying to be a UI designer. Its really interesting to backend of products.

[RandomHero]

This is a great resource but it’s totally possible to avoid writing Swift and to use a fullstack framework. I was tasked with Apple Wallet ID/Business Cards as a POC — I’m using Nextjs, TypeScript, Node, and AzureAD for enterprise org only auth. The pkpass itself, while it does have a unique mime type, is just a zip file containing a manifest json file and other assets. I initially used Sanity as a headless CMS for pass storage and allowed users to click “download my pass” but have since switched to Prisma and Postgres. Anyway, if on an iPhone, downloading the pkpass would open it as expected. On my Dell laptop for however, I have to use pkpass viewer software through the windows store to pull it up. Either way, there are a lot of ways to slice n dice pkpass generation/handling. Great video though

[nimrsawafta]

I love how you jumbed from light mode to dark mode in your room

[idressCode]

Thank you my friend, it really helped me!

[ice]

Thank you for the tutorial very helpful, especially when you meeting with this functionality first time :)

[VictorRodriguezvmrmedia]

FANTASTIC work man! How would I update an existing pass with new information and not have to redownload? In my use case, I would need to update an existing pass, rather than generating a new one and having to downloaded again.

Keep this coming. Great stuff! THANK YOU!

[slimbron]

Great content, thank you it was very useful! 👍🏼

[jhonprieto]

Is a good video. Maybe do you know how can i create wallet pass and use the NFC functions? For example bus pass ore train pass. Great content, you should continue with more videos! Cheers

[bitcoinbrisbane]

So better than on Ruby. I could never get c# to work.

[cesarparisot]

Great job !! Sure it could be an app on the App Store, that gives me design ideas already 😂

[RifleyPL]

If someone is struggling with openSSL certs, (Global default library context, Algorithm (RC2-40-CBC : 0), Properties ()) give -legacy flag

[YoungSith]

Man, great video, I succesfully managed to implement Passes in my React Native app. I was wondering, if you could make a video on how to update passes, for example for points rewards or update the QR when it expired. Thanks so much for your help!

[junelljacinto]

very helpful man! so happy i discovered your channel.
also, do you happen to know how to update it once its already added to wallet?

thanks