Nuxt 3 Authentication Using Supabase with James Sinkala - VUE 218
James Sinkala is a Full-Stack Developer and Technical Writer. He joins the show to talk about his article, "Nuxt 3 authentication with Supabase". He starts off by talking about his career and experiences as a developer.
Hosted by:
Steve Edwards
Special Guests:
James Sinkala
Show Notes
James Sinkala is a Full-Stack Developer and Technical Writer. He joins the show to talk about his article, "Nuxt 3 authentication with Supabase". He starts off by talking about his career and experiences as a developer.
On YouTube
Sponsors
Links
- Nuxt 3 authentication with Supabase
- Drawing, Bacon, and Dad Jokes With David Neal - VUE 200
- Laravel and Vue with Taylor Otwell - VUE 199
Socials
- James Sinkala - Medium
- LinkedIn: James Sinkala
Transcript
STEVE_EDWARDS:
Hello everybody, welcome back to Views on View, the podcast with a view on ViewJS. My name is Steve Edwards, I am the host with the face for radio, but the voice for being a mime, but I'm still your host. Today, I am flying solo on the panel, and we are once again the international world-spanning podcast with our guest host, James Sincola. How you doing, James?
JAMES_SINKALA:
I'm doing great, how are you Steve?
STEVE_EDWARDS:
Good, good, good to have you. James is calling from East Africa, the company of, company, country, there we go, of Tanzania.
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
And we're gonna talk about Next 3N SuperBase today. But before we get started, James, why don't you just give us a little background on yourself and tell us who you are, your development experience, why you're famous, whatever you wanna tell us about yourself and your background.
JAMES_SINKALA:
Thanks for having me Steve. I'm James Sinkala, I'm a full stack developer and technical writer. For the past couple of years, three years I could say, I've focused more on technical writing. Which brings us to the article that we are discussing today. It's a long story, but I can sort of put it short. What got me interested into programming was... back from where I grew up, everything that we saw on TV that was kinda, we couldn't explain, be it on movies or whatever, people had this saying, they would just say, it's just the computer. And I never really understood that, but,
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
it sort of was the answer for everything that we couldn't explain, it's the computer. And everybody seemed to sort of understand that. But I was curious and the first time I came across one, I sort of had the understanding that, well, I think people do actually have a hand on creating these things. So that's where curiosity got me and I said, okay, if people actually do write these programs, of course, I didn't understand the concept of programs back then, but I just had that understanding if people do actually create these things. then I'd like to be one of those people who create stuff. So from then on, it's just been me and trying to figure out how to create programs and create stuff. Yeah, and I've had help along the way. I had some great teachers in school and all that. Yeah, and so fast forward, last, as I say, the past three years is when I got into technical writing. And I had no idea that you could get paid writing technical content. So, you know, discovering that was like some sort of new discovery, like sliced bread or something. So, yeah. So, and I'm a pretty
STEVE_EDWARDS:
So you
JAMES_SINKALA:
big.
STEVE_EDWARDS:
like, what is it you like about technical writing? Sorry,
JAMES_SINKALA:
So
STEVE_EDWARDS:
we
JAMES_SINKALA:
with
STEVE_EDWARDS:
got
JAMES_SINKALA:
technical
STEVE_EDWARDS:
the
JAMES_SINKALA:
writing,
STEVE_EDWARDS:
lag here.
JAMES_SINKALA:
mainly, so how I started off was, you know, especially when you are writing programs, there are these times where you delve into something that you haven't done before. So you'd want some sort of documentation that you could reference later on when you are dealing with the same thing again. Instead of doing another research and going through documentations, you needed sort of a shortcut to do these tasks. that you don't do as much, so you need some sort of reference. So I was writing reference for myself. Initially, I wasn't writing for anybody else. Then afterwards, I got to enjoy it and getting the feedback that it was helping one or two people. Then I said, OK, maybe I could actually enjoy this. I could do more of this. And by then, I hadn't discovered that I could get paid doing so. So that was an incentive after discovering this. I could get paid writing. So I was
STEVE_EDWARDS:
Yeah,
JAMES_SINKALA:
actually enjoying
STEVE_EDWARDS:
I've always
JAMES_SINKALA:
doing
STEVE_EDWARDS:
liked
JAMES_SINKALA:
it.
STEVE_EDWARDS:
to do, sorry. Yeah, I've liked to do technical writing too, although it's not something that I would ever want to do full time, just write for other people, because I like to write about my own stuff. It's a lot
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
easier to write about something that you know, as compared
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
to just going to people, okay, now how do I explain this, and how do I explain that? So,
JAMES_SINKALA:
Right, right.
STEVE_EDWARDS:
my thing has always been, okay, I know how to do this, and I had to solve a few problems, so let me write something for... people so that they can understand it. And I would
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
like to do a lot more in terms of documenting code afterwards or writing wiki pages or stuff like that, but that's
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
time and when you got development tasks to do, you don't always have the time.
JAMES_SINKALA:
You don't... Exactly.
STEVE_EDWARDS:
I don't know if
JAMES_SINKALA:
Exactly.
STEVE_EDWARDS:
you're like me, but I could never write a creative story to save my life.
JAMES_SINKALA:
Hahaha
STEVE_EDWARDS:
If I had to write a story and develop characters and a plot, nah, forget it, can't do that. I just don't have that creative juice at all.
JAMES_SINKALA:
Uh, yeah, I'm the same.
STEVE_EDWARDS:
But get me to explain something technical or write a business letter or something like that. I'm your guy.
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
For sure.
JAMES_SINKALA:
yeah. Yeah, so I think I'm the same. When it comes to writing creative stuff, the only memory I have was trying to draw some creative stories back in
STEVE_EDWARDS:
Ha
JAMES_SINKALA:
the days.
STEVE_EDWARDS:
ha.
JAMES_SINKALA:
So, you know, those stick figures, yeah,
STEVE_EDWARDS:
Yes.
JAMES_SINKALA:
those are the best I could do.
STEVE_EDWARDS:
Yes, the best I could do. Yeah, I can't, I am artistically challenged to save my life. You know what's interesting though is,
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
do you know a guy named David Neal?
JAMES_SINKALA:
I think I might.
STEVE_EDWARDS:
He's a developer and he got into programming, I mean into drawing. And I actually
JAMES_SINKALA:
Oh,
STEVE_EDWARDS:
had
JAMES_SINKALA:
interesting.
STEVE_EDWARDS:
him here on the podcast one time.
JAMES_SINKALA:
David Neal.
STEVE_EDWARDS:
And I cannot, Reverend Geek, that's right. He goes by Reverend Geek on Twitter. And he
JAMES_SINKALA:
Okay
STEVE_EDWARDS:
tells the story of how he got into drawing.
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
It was that he was doing conference presentations
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
and. He, in one presentation, he threw some really basic art into it, some sort of drawing, and he found that his audience was engaged so much more once he
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
started doing that, that he started doing it, and he started watching YouTube videos, and he learned to draw. Now he's got like books that he puts out, and a good
JAMES_SINKALA:
Wow.
STEVE_EDWARDS:
thing he did, I think he did one book of dad jokes too, that was really cool. But he's got,
JAMES_SINKALA:
Oh,
STEVE_EDWARDS:
if
JAMES_SINKALA:
dude.
STEVE_EDWARDS:
you follow him on Instagram or Twitter, he's always... He's got arts and books and stuff. He just learned to draw on his own and it was all because as a developer, he didn't know
JAMES_SINKALA:
Yeah?
STEVE_EDWARDS:
the first thing about drawing. But as
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
a developer, he found that it really engaged his audience much better and so took off. And he
JAMES_SINKALA:
Interesting.
STEVE_EDWARDS:
was like me, you know, doesn't have an artistic bone in his body, but he learned how to do it. So it's
JAMES_SINKALA:
Interesting.
STEVE_EDWARDS:
something you can learn how to do, you know, for
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
sure, but
JAMES_SINKALA:
when you take the time. Right. Right.
STEVE_EDWARDS:
right,
JAMES_SINKALA:
Do you have
STEVE_EDWARDS:
exactly.
JAMES_SINKALA:
his dad's jokesbook?
STEVE_EDWARDS:
I'm sorry, what? Do I have it? No, I haven't
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
bought it yet. I need to, I need to do it.
JAMES_SINKALA:
Yeah, you need to.
STEVE_EDWARDS:
Yeah, for sure. Add to my list of jokes. So
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
anyway, back to you. You were talking about drawing.
JAMES_SINKALA:
Sorry, yeah, yeah, so stick figures was the best I could go with, you know, writing sort of creative stories. But with technical writing, just as you referenced it, wherever you'd be creating something, then you say, okay, let me write about it. So just as I said, for me, I was writing references for myself. And if you go through the first articles that I've ever written, they are based on things that I had... based on, let's say, features I had added to bigger projects that I was working on. So yeah, there was that. And it was kind of fun. So the thing was, in the beginning, I was sort of nervous getting into writing, putting your writing out there for people to scrutinize. And you know that there are people who are more technical than you, so there was a higher chance that somebody will come and say, oh, what is this? Or they will correct you in public. So I sort of was nervous. But when I go to write my first article, and I can say Dev.2 sort of played a huge part in giving me the confidence to do so. So yeah, props to them. And yeah, I started posting over there. I initially started posting on my own website.
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
Then there was no much traction over there, because. you need eyes to see your content before people start giving attention to your own blog. So I got into dev.to. Then I added canonical URLs
STEVE_EDWARDS:
Yes.
JAMES_SINKALA:
to my own website.
STEVE_EDWARDS:
All
JAMES_SINKALA:
And that's
STEVE_EDWARDS:
right.
JAMES_SINKALA:
how I directed more traffic to my own blog.
STEVE_EDWARDS:
Yeah, I've done a little bit of writing back when I had time and it was cool because you could put the link to your own website and get
JAMES_SINKALA:
Yes,
STEVE_EDWARDS:
traffic that way.
JAMES_SINKALA:
yeah, yeah, I've leveraged that a lot.
STEVE_EDWARDS:
Yeah, that's really
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
cool that they do that.
JAMES_SINKALA:
yes, really cool. Yeah, so for instance, personally, I was, when HashNode came around, I also got into it. But I sort of got into HashNode late, a bit late. But I also do add canonical URLs on my HashNode posts. So I mostly do cross-posting. I've been doing that for the past year, I think. So I will post an article on my blog, then after Dayo2 I'll post it on Dev.2, then HashNode. And it sort of helped a lot to establish the authority of your domain. Yeah, so it helps quite a lot.
STEVE_EDWARDS:
Cool. So now when you were writing, this is before you got into actual doing development work. Is that right? Or did I get that
JAMES_SINKALA:
No,
STEVE_EDWARDS:
timeline wrong?
JAMES_SINKALA:
I actually started development work. And well, I actually started a while back, around 2016,
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
late 2015 or early 2016. And back then, I had no idea that there were web frameworks, things like Gladavel and all these other web frameworks that came along. I had no idea about those. So I started
STEVE_EDWARDS:
and
JAMES_SINKALA:
off with PHP. So you
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
could imagine. I was writing spaghetti code.
STEVE_EDWARDS:
Yes, that's where I started too, so been there.
JAMES_SINKALA:
Yeah, so I started off there and initially, so looking back home, you know, the music industry was sort of getting attention on this part of the continent and I could say all over the continent. So I decided, and the thing that was lacking was a website, a lyrics website. So I decided to create a lyrics website. And I said, okay, how am I going to do this? Initially, I just knew HTML. And I started off with HTML. And I could remember, I didn't have an idea how to do direct one page to the next. So I sort of had, I was looking sort of the dynamic features for web and I couldn't find those. So I remember using iframes. Yeah, so those are. all these. And yeah, so that followed by, you know, I started learning PHP through Google and the PHP website. Then I got to understand about serving servers, hosting websites and everything. So it started off just by trying to create the Lyrics website. And through it, having gone through those, let's say, adding... features, play feature, trying to understand the programming language itself, PHP, and later on a friend of mine introduced me to Laravel and from then on I didn't look back.
STEVE_EDWARDS:
I'd be having Laravel and view all day. So
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
yes,
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
I'm from the fact I had on this podcast. We had Taylor out well
JAMES_SINKALA:
Oh,
STEVE_EDWARDS:
On
JAMES_SINKALA:
interesting.
STEVE_EDWARDS:
probably about five or six months ago back in November December. I think it was a great It's one of my favorite interviews I've done
JAMES_SINKALA:
Oh,
STEVE_EDWARDS:
On this
JAMES_SINKALA:
I need to
STEVE_EDWARDS:
on
JAMES_SINKALA:
listen
STEVE_EDWARDS:
this particular
JAMES_SINKALA:
to that.
STEVE_EDWARDS:
podcast. Yeah. Yeah, it's really pretty good
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
That was a good time
JAMES_SINKALA:
Yeah, good times. And interesting, so I think Laravel is how I got introduced to Vue.js and
STEVE_EDWARDS:
Right.
JAMES_SINKALA:
the whole front-end framework sold. I never had any an idea about that. But when they brought it into Laravel and I found it, oh, I never looked back because I actually had of React.js before but I couldn't crack React.js then. Then just within the same time I came across and the documentation was just swift to just go through.
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
And I could say maybe the documentation part, they did a good job at that. That's why I got into a lot of it first, maybe. Yeah, so I do remember those days. I used to read the documentation while I was in the bus. Whatever I was, I was just reading through the documentation. So I really got fast into UGS and I enjoyed it for a while. And I actually never looked back, never got into ReactJS until last year.
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
So I've just been mainly dealing with Vue.js, Next.js, and the Vue.js ecosystem.
STEVE_EDWARDS:
Right now, I'll give my usual push that I always do, particularly since I just lost a new app
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
yesterday. Have you heard of Inertia.js?
JAMES_SINKALA:
Yes. Yes. I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I-I
STEVE_EDWARDS:
So inertia is the bomb. Inertia is so awesome and it's so fast.
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
So I use it with Laravel in view and it's just real
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
quick. It's just sort of a glue that glues the two together and you pass your Laravel data to your front end components as props.
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
and it's doing everything behind the scenes and not doing a full browser reload. And it's got helper functions
JAMES_SINKALA:
interesting.
STEVE_EDWARDS:
and it works so well together. I just launched an app yesterday that I've been working on for a few months. And
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
it's so fast and it's just great. It's a lot of fun to work with. You can incorporate it with Tailwind or you can use whatever framework you want.
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
But what's nice is Laravel Breeze. which is one of their packages or distributions I think you would call it, comes. You can download Breeze and have it all set up and ready to go, either that or
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
Jetstream, but it has Laravel installed, it has Vue installed, it has Nurture installed, it has Tailwind installed,
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
and you're just up and going. And then...
JAMES_SINKALA:
What does your app do?
STEVE_EDWARDS:
It's an internal membership management, sort of a cred app
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
for a private group that I belong to. So it's behind the scenes thing. It's not a public facing
JAMES_SINKALA:
Okay. Okay.
STEVE_EDWARDS:
tool. But
JAMES_SINKALA:
All right.
STEVE_EDWARDS:
for what it does, it's really awesome. I just hosted on Laravel Forge, you know, with the DigitalOcean server. And
JAMES_SINKALA:
Okay, interesting.
STEVE_EDWARDS:
yeah, it's a piece of cake. It's really a piece of cake.
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
So anyway.
JAMES_SINKALA:
interesting.
STEVE_EDWARDS:
off of that. It's something to look into if you want to be able to integrate the two in
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
a really neat way. But enough
JAMES_SINKALA:
yeah,
STEVE_EDWARDS:
of my
JAMES_SINKALA:
I actually
STEVE_EDWARDS:
uh, I
JAMES_SINKALA:
came
STEVE_EDWARDS:
swear
JAMES_SINKALA:
across
STEVE_EDWARDS:
people
JAMES_SINKALA:
a
STEVE_EDWARDS:
think
JAMES_SINKALA:
notion.
STEVE_EDWARDS:
John, people think that
JAMES_SINKALA:
Actually...
STEVE_EDWARDS:
Jonathan Reinick's paying me for all my ads that I always talk about inertia. But it's one of those things where if you like it you talk about it. So...
JAMES_SINKALA:
Yeah, yeah, that's how it goes. And honestly, that's what I've been doing mostly when it comes to writing content, apart from currently. So for instance, this Nexttree and SuperBase article, this was just based on one of the reasons being it was just, you know, a good... service that I enjoyed using back then and I decided to write something about it. There was another reason to it, I think we'll talk about it later. And regarding Inarsha, I also came across Inarsha via Laravel, so I do remember they did introduce Inarsha and Livewire, if I'm not mistaken.
STEVE_EDWARDS:
Right, so Livewire uses, what's the templating language? I can't believe I'm brain farting in what the templating language is. But yeah, Livewire just uses your Laravel
JAMES_SINKALA:
Blade.
STEVE_EDWARDS:
templates. Blade, thank
JAMES_SINKALA:
Blade,
STEVE_EDWARDS:
you.
JAMES_SINKALA:
yeah.
STEVE_EDWARDS:
Wow. So yeah, that's what Livewire is, and then
JAMES_SINKALA:
in
STEVE_EDWARDS:
Breeze.
JAMES_SINKALA:
Asia is more of.
STEVE_EDWARDS:
Breeze you can use with React if you want to as well. So Breeze is a real basic implementation in terms of user authentication
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
and capabilities. And then JetStream
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
is a more advanced version that has Teams and some other functionality built into it too. And they suggest
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
if you're not really familiar with Laravel to start with Breeze, you know,
JAMES_SINKALA:
Okay.
STEVE_EDWARDS:
and then use JetStream if you need more functionality.
JAMES_SINKALA:
Interesting. And it's interesting that I, you know, I sort of have, I sort of haven't been using Laravel that much. I used it, last time I used it I think was a year or two ago when I was creating working on a certain project for a customer because I've been freelancing over here in my locality for some time. And whenever I'm writing something that's a bit heavy, I always default to I do have much confidence with Laravel, especially when working on large projects. The last project that I was working on was sort of like an e-learning platform.
STEVE_EDWARDS:
Oh, OK.
JAMES_SINKALA:
In that project I did use Laravel and VJS.
STEVE_EDWARDS:
Cool. All right, so tell me about, excuse me, Nuxt and how you got into Nuxt and I guess why you're using it as compared to a Vue SPA. I think, you know, as with, most people will know that as with any JavaScript framework, you have what's sort of called a meta framework, you know,
JAMES_SINKALA:
Middle
STEVE_EDWARDS:
that
JAMES_SINKALA:
framework,
STEVE_EDWARDS:
allows you to handle
JAMES_SINKALA:
exactly.
STEVE_EDWARDS:
the server side rendering and for the
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
SEO purposes and all that kind of stuff. React has Next.
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
Camera angular has something and Svelte has Svelte kit.
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
So anyway, and we've talked plenty about NUXT on this show with Drew Baker and Daniel Rowe and other people.
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
But what got you into NUXT?
JAMES_SINKALA:
So with Nox, the first time I came across Nox, I did have this habit of going through the view awesome repo. where you just see a list of these plugins and etc. you know articles everything in between that had to do with Vue.js and that's where I came across Next.js. It wasn't from I don't know maybe a post or seeing somebody or a project. No I just it was just through the Vue awesome package, not package repository and I decided to check it you know curious as always and Back then it was Naxt.js and there was this other framework, I might have forgotten it by now, which the maintainers actually stopped working on it. So, yeah, I stopped also following on that. Then I focused on Naxt. And just as you said, I mainly used Naxt for the SSL part, because handling that with Vue.js was kind of complex.
STEVE_EDWARDS:
Yes.
JAMES_SINKALA:
By this time I actually had my personal website using VJS and I was trying to sort of have my SEO on check It was kind of complex getting your SEO on point So I was looking for alternatives and I just as I said I had come across Next.js. So I sort of Tried creating my website using Next.js. Then there's this other website actually the lyrics website that I was talking about earlier I came and rewrote it in Nax.js, from Laravel to Nax.js, and I enjoyed it, so I never stopped. And not jumping into maybe one of the next topics, but one of the reasons as to why I wrote this article, SuperBase Authentication with Nax.3, was I went through the SuperBase documentation and I found that they were actually... They actually had sort of within their documentation they had instructions on how to authenticate with Next.js and I'm a V.J.S. guy so
STEVE_EDWARDS:
Oh,
JAMES_SINKALA:
I
STEVE_EDWARDS:
okay.
JAMES_SINKALA:
said okay why don't they have one for Next.js or V.J.S. So I decided to sort of write this article for the people who are actually using V.J.S. and would like to use SuperBase authentication with Next.js.
STEVE_EDWARDS:
Yes, authentication is a very thorny topic, very difficult. Seems like
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
there's all kinds of different solutions
JAMES_SINKALA:
square opinionated. Yeah.
STEVE_EDWARDS:
out there. Yeah, it's difficult to do and there's solutions out there for authentication and how to handle it. The nice thing about the Laravel inertia stack for me is that
JAMES_SINKALA:
Yeah.
STEVE_EDWARDS:
Laravel takes care of that for me. It's
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
got all this
JAMES_SINKALA:
I...
STEVE_EDWARDS:
stuff built in. It's
JAMES_SINKALA:
Yes.
STEVE_EDWARDS:
got,
JAMES_SINKALA:
Makes
STEVE_EDWARDS:
you
JAMES_SINKALA:
it
STEVE_EDWARDS:
can
JAMES_SINKALA:
very
STEVE_EDWARDS:
use
JAMES_SINKALA:
simple.
STEVE_EDWARDS:
dead.
JAMES_SINKALA:
Very easy.
STEVE_EDWARDS:
Yeah, so it's one less headache I got to deal with, right?
JAMES_SINKALA:
Exactly, yeah.
STEVE_EDWARDS:
So yeah, there's lots of tools. I've heard people that have rewritten their own and it's just a time
JAMES_SINKALA:
Right,
STEVE_EDWARDS:
suck for
JAMES_SINKALA:
it
STEVE_EDWARDS:
sure.
JAMES_SINKALA:
gets messy.
STEVE_EDWARDS:
So let's talk about Super Bass real quick, what it is and
JAMES_SINKALA:
Mm.
STEVE_EDWARDS:
what's an alternative to.
JAMES_SINKALA:
Yeah, so SuperBase in itself, as they say on the website, unless they have changed it, they are an alternative to Firebase.
STEVE_EDWARDS:
Nope, that's the first sentence. SuperBase is an
JAMES_SINKALA:
Yeah,
STEVE_EDWARDS:
open source Firebase alternative.
JAMES_SINKALA:
exactly, yeah. So just as the sentence says it, they offer most of what you'd have with Firebase. For some people, the fact that Firebase being from Google, they have a problem with that. Personally,
STEVE_EDWARDS:
Me, yes.
JAMES_SINKALA:
I actually moved from Firebase to... I initially used Firebase for a couple of projects, and the band of size was a thing for me when it came to Firebase. It was one of those bottlenecks and some other issues. And back then I actually shifted over to FaunaDB from Firebase. And the reason that I came across and started working with SuperBase, this was around last year, a certain platform had approached me and they wanted me to create a course for them. So I said okay. And they told me okay, so what stack would you like to write on? Could you propose something? So I came up with ideas and they gave me access to their platform and they said, could you go through our platform and see what it is that we are lacking and maybe you could compose something. And I said, okay. So I did a bit of research, went through their courses. I saw what was missing, which was mostly NuxJS. There wasn't... If my memory serves me right, there was nothing on Vue.js and NuxJS. So I did propose an XJS and on the database side of things, there was nothing on SuperBase. So I proposed those stacks. We discussed on an ideal title for the course. Then I started working on the TOC, table of contents.
STEVE_EDWARDS:
Mm-hmm.
JAMES_SINKALA:
And by the end of the composing of the table of contents. They sort of went to you also.
STEVE_EDWARDS:
You sort of went what?
JAMES_SINKALA:
AWOL. They just
STEVE_EDWARDS:
Oh.
JAMES_SINKALA:
disappeared. They weren't answering me. So
STEVE_EDWARDS:
Oh no.
JAMES_SINKALA:
I said, okay, so I've reached this stage, spent my time doing all this. Why not try something? And with that added curve, as I said before, I went to the SuperBase website, their documentation, they had nothing on next year's, but they did have documentation on authentication with next year. So I decided to pair those two. and write something for myself, of course, and for general next year's community. Yeah. So that was the backstory.
STEVE_EDWARDS:
So they got docks, they actually function, I can use them. So yeah, those are good reasons to use something. So yeah, those are good reasons to use something.
JAMES_SINKALA:
Yeah. Yeah.
STEVE_EDWARDS:
sure. So okay, so let's get into your blog post then about using SuperBass with Nuxt.
JAMES_SINKALA:
Right.
STEVE_EDWARDS:
So what's involved?
JAMES_SINKALA:
Okay, so as any other blog post you just try to lay out what it is that the two, the stack that you're talking about by their own definition what they are. Just basic stuff for those people who are totally new, let's say for the stack. So I just went on with an introduction to SuperBase. just as we said, is the open source Firebase alternative that presents us with backend features such as Postgres database authentication, edge function, storage, et cetera. An interest on this tutorial, the authentication part, and we're going to learn through how to authenticate Nest 3 applications using SuperBase. So, a basic layout was, another interesting thing was, it was around the same time, I think, whereby NaX 3 came out of beta.
STEVE_EDWARDS:
Uh huh.
JAMES_SINKALA:
It was around this time. That's why I titled it Naxt3 instead of just Naxt. Because there was a focus on Naxt3 by then. We just go straight to setting up a Naxt project using the new NuXy tool. We create a new Naxt project. next three projects if I'd like to emphasize on that. Then just take the reader through the basic setup whereby we'll just be removing some scaffolding pages, etc., which we do not need for the project that we are going to build. And the main focus, I think, especially when it comes to SuperBase, was setting up the plugin. So the fact that they had the plugin, that was a big plus, because you aren't trying to figure out and be opinionated. Because if you're opinionated, I mean, people would like at least something to have a bit of order that's already handed over to them, just like we do have with Laravel. When you go through Laravel authentication, you're not questioning, oh, why don't I do this way? They already have something set for you. You just go along with it, and you hope that they have done their best.
STEVE_EDWARDS:
Actually hold on for a second, we've got to edit something here because I'm getting a warning about your browser not allowing recording. I'm hoping this has been recording. What browser are you using? Okay, that should be fine. Air went away. Well, let's keep going for now. All right, so where were you at? Where were you about to register them? just keep going along. I haven't really delved into Next or the article yet. So I mean, we can only, you can only mouth code so much. And we'll refer them. We'll have the blog post in there that they can click on and look to. We're just sort of giving the generics of how easy it is to use SuperBase for authentication with Next. So we don't have to give all the code, but just sort of the general things that you're doing in your blog post. So, all right. Yeah, go ahead. Yeah, N-U-X-I, yeah. Right, so the gist of all this from what... So the gist of all this, I mean, we can only, you can only mouth code so much obviously. And if you're looking at the blog post, there's plenty of code samples and GIF samples of, you know, the screens and what it looks like and stuff. I think what I'm gathering from reading this is it seems pretty straightforward. You basically create a SuperBase account. They have a plugin, you install it, you set your credentials and then you go from there. There's some coding you'll have to do obviously. Now I'm curious that you had, it looks like you had to specifically make some tables or inside of your database to store the data. Is that right? The plugin doesn't handle stuff like that for it? Well I guess not, it wouldn't. Would it? Yeah, it's quite interesting looking at the available auth providers that you can use. Anything from Azure to Facebook, GitHub, GitLab, Google, Spotify, Slack, Twitter. So yeah, that gives you quite a impressive list of options if you don't wanna do the simple email stuff. Exactly, yeah that's how I do. Alrighty, so is there anything else we need to cover about your blog post or SupaBase or Nuxt or anything we missed that isn't covered by your blog post? Wow, that's a lot of writing. Yeah, that's sort of funny about writing posts when you do a lot of publishing and writing is that you never know what's gonna take off, right? You could write a little blog post, oh, I'm just gonna write this for myself, and yeah, maybe it'll help somebody, and then it just takes off, and the one you think, oh, this is awesome, I got all kinds of great information here, doesn't do so well, right? Oh. Oh dude, you could have been wealthy. Just start writing, everybody wants to read your content, you're getting paid, right? Just think about it. No. All right. Did we lose you, James? Nope, okay, it looks like we just lost our video, that's cool. All right, so with that we will wrap up our talk about Nuxt and Super Bass and all that. Like we said, if you wanna read James Post and play with it, we will have the link in the show notes. So, with that we'll move on to picks. Picks are the part of the show where we get to talk about anything we wanna talk about really that may or may not have to do with tech. We've had all kinds of interesting things picked here on. on the show, so I will start with the high point of any of my podcast episodes, which are the dad jokes of the week. And so, let me get my sound effects ready, here we go. Excuse me, I went to my doctor the other day, because I had this surgery scheduled and... And I said, man, doctor, I'm nervous. This is my first operation. He says, that's okay, don't worry, it's mine too. Yeah. Nothing like instilling confidence in your patients, right? So here's a question. Yeah, right. So here's a simple question. Why was Dr. Frankenstein never lonely? He was good at making friends. Right, he made his friends, literally. Exactly, yes. He was one of those real creative kind of guys, you know? And then, right, I was driving along the other day and saw this roadside stand on the side of the road it said lobster tails, $2. Oh my God, that sounds like a good deal. So I paid my $2 and instead of giving me the lobster the guy says, once upon a time there was this lobster. Yes, so, Monster Tales, right? T-A-L-E-S. And those are the dad jokes of the week. Go for it. It's your turn. You're up. What are your picks? Uh-huh. Very good. I've seen that one. Jack and the beans talk. That's right. Wonder about friends like that, don't you? Oh wow, okay. So you really appreciate that joke then, don't you? Ha ha ha ha. Very good, very good. Another classic one. I think I just saw that here recently. So grandma, come back. You can stop walking now. Wait a minute, do I need to jump? Wait a minute here, delayed jump joke, sorry. Sorry, gotta work on the sound effects. All right, did you have any other actual picks for us besides the dad jokes or was that it? Yes, we'll call that a shameless plug. So it's chisel strike. Am I saying that correctly? Chisel strike? I like that. Okay, gotcha. So it allows you to store your data at the edge when you say so on a CDN somewhere so it's quicker to access. Yes, yes, I've just found the link on Medium here, so I'll make sure and add that into the show notes as well. So, alrighty. Alrighty, well thank you for coming, James. It was good to talk to you about your post. And if you wanted to learn more about SuperBase and Nuxt and how to authenticate, then read the blog post. And with that, we will say goodbye and we will talk to you everybody next time on Views On View.
Nuxt 3 Authentication Using Supabase with James Sinkala - VUE 218
0:00
Playback Speed: