Create a webcrumbs plugin to integrate Auth0 login

[webcrumbs-community]

Description

We're shooting for the stars by adding Auth0 login integration as a WebCrumbs plugin. The game plan involves creating a spanking new React or Next.js project under /plugins/auth0-auth. We'll kick things off by implementing the Auth0 authentication mechanism with as little code as possible. Future vision: metamorphose this bad boy into a webpack and make it operable via the /admin control center.

Requirements

• Fire up a new React or Next.js project at /plugins/auth0-auth
• Wire up Auth0 login, keeping it lean and clean
• Blueprint the transformation into a webpack down the road
• Enable activation as a plugin from the /admin dashboard

Steps to Reproduce

1. Cruise over to /plugins
2. Conjure up a new React or Next.js project named auth0-auth
3. Add Auth0 login functionality with minimal fuss
4. Strategize for eventual webpack conversion

Additional Context

Adding Auth0 to our repertoire isn't just window dressing; it's a cornerstone for broadening the scope and adaptability of WebCrumbs.

Acceptance Criteria

• [ ] New React or Next.js project ready to rock at /plugins/auth0-auth
• [ ] Auth0 login is up and running, no frills
• [ ] Game plan set for morphing into a webpack

Ready to roll up your sleeves? Contributions from the community are not just welcome; they're coveted.

Originally suggested by @DaveKobrin in https://github.com/webcrumbs-community/webcrumbs/issues/67#issuecomment-1763719077

[aditya4196]

@webcrumbs-community Can you please assign it to me, I would like to work on this?

[webcrumbs-community]

Hi, @aditya4196! Thanks, mate. Let us know how it goes.

[aditya4196]

Sure Definitely!! On it!

[webcrumbs-community]

I think taking a look at #74 may help! Cheers

[aditya4196]

Based on our research, For a particular user to integrate with the auth0 through a plugin, they need to create an account based on what their requirements are from auth0. We haven't found any specific sdk or api which can help create an account. The only way it seems to be is through the sign up page. There are management apis which can handle user management for the auth0, but it could be done only within an existing account.

It would be more convenient if we could request the auth0 staff to build a plugin which can give the entire control for auth0 Also I assume, it is the same issue with ClerkAuth

What are your opinions about it?

[webcrumbs-community]

Hi, @aditya4196.

It's similar for ClerkAuth, it seems. I suggest we don't worry about making the account creation easier and integrated at this point. What we can do instead is to have a component in our dashboard that adds a form where the admin will put his or her account credentials. For the time being, ClerkAuth is working with an environment variable containing these credentials. In the future we can add the dashboard form as well. What do you think? If Auth0 does not offer a SDK for the login page, we can use a similar structure as in /admin.

On requesting the Auth0 staff, absolutely. That would be awesome. I'm not sure if we should finish our Plugin Documentation first so they can know what to build. But we could give them a heads up. If you feel like, yes, please do it.

Cheers!

[aditya4196]

Got it! We will go ahead and implement the component. And also, we will try to request the Auth0 staff for the build!

[aditya4196]

Sorry for the delay. Im going to complete it by today EOD

[webcrumbs-community]

Don't worry, @aditya4196! And thanks for letting us know. Anything you need, drop a comment. Cheers

[aditya4196]

@webcrumbs-community i have generated a PR for issue 72. Can you review it and merge it. Let me know if you have any questions

[webcrumbs-community]

Great, @aditya4196! Will do.

[aditya4196]

Great! I still have some questions regarding the plugin structure and integration. I think we need to brainstorm and define a uniform structure for the plugin integration process, especially for authentication modules as I have noticed that It needs some technical intervention to use the plugin (setup the authentication) for the user. I will invest some time in researching a bit on the auth integration

[webcrumbs-community]

That's great! I should probably start a discussion on this topic, as it crosses a lot of issues. E.g. #51 too. I placed an initial idea at /research, but I'm also still researching and this is the central aspect of webcrumbs, be better discussed with the community. I'll post here after I open the discussion. Cheers!

[webcrumbs-community]

Hi, @aditya4196. I'm reviewing the PR and got stuck with Auth0 requirement of a https callback, otherwise I get the Callback URL mismatch response. Would you shed some light upon this?

[aditya4196]

Can you post the url you used for callback?

[aditya4196]

Allowed Callback URLs: http://localhost:3000/api/auth/callback Allowed Logout URLs: http://localhost:3000/

[aditya4196]

Let me correct the steps mentioned for testing. And i will get back to you.

[webcrumbs-community]

Now it worked, thanks! I was afraid they'd ask for a https address as per the instructions, but it worked.

[aditya4196]

I want to make it as much automated as possible since you saw it is kind of manual process to setup the auth. Let me know once you create a discussion thread for the brainstorming. I will try to connect with the auth0 community to see if i can get some insights on the automation process

[webcrumbs-community]

Great. Just opened the Core Discussion. This will be the most important part, for sure.

[aditya4196]

Perfect!

[aditya4196]

Also, i did not do the webpack bundling. Im not aware about that concept much. So i will try to read about it a bit then implement it. But for now, would this be enough to close the issue?

[webcrumbs-community]

No, my bad. I should've closed. I think we better focus on the Core Discussion, and then bundling and integrating will become clearer. I'll also add some resources at the research folder on micro frontends. This concept probably hold all the keys we're looking for.

[aditya4196]

No worries. I was kind of having the same thought process of first coming up with a plan for integrating stuff. So, let me know if you want any other functionality for me to work on. I will pick that up.