✨ feat: support login & session authentication via OAuth 2.0 (Auth0)

[CloudPassenger]

💻 变更类型 | Change Type

• ✨ feat
• 🐛 fix
• ♻️ refactor
• 💄 style
• 🔨 chore
• ⚡️ perf
• 📝 docs

🔀 变更说明 | Description of Change

This Pull Request introduces a new feature that supports login and session authentication using OAuth 2.0 with Auth0 as the provider. The implementation leverages NextAuth.js version 5 to handle authentication both on the server-side (Edge Runtime) and the client-side (Client Components). The current setup allows for a simple OAuth 2.0 authentication flow that is specifically tailored to work with Auth0.

Key changes include:

• Integration of NextAuth.js for handling OAuth 2.0 authentication.
• Display of error messages on the chat interface when the user is not logged in.
• Addition of login, logout, and user information display (currently showing the user's email) at the bottom of the settings page.
  Configuration of the OAuth feature through environment variables AUTH0_CLIENT_ID, AUTH0_CLIENT_SECRET, and AUTH0_ISSUER.
• With these changes, users will be able to authenticate securely and seamlessly, enhancing the overall user experience of the application.

📝 补充信息 | Additional Information

This Pull Request is a significant step towards implementing robust user authentication within the application. While the current scope is limited to Auth0, the groundwork has been set for potential expansion to support other OAuth providers in the future. The addition of user authentication opens up new possibilities for personalized user experiences and secure access control.

For developers looking to test or deploy this feature, it's essential to configure the necessary environment variables with their Auth0 credentials. Further documentation or guides on setting up and using Auth0 with NextAuth.js might be beneficial for those unfamiliar with the process.

This contribution aims to provide a secure and user-friendly authentication mechanism, and I look forward to feedback and suggestions for improvement.

[vercel]

@CloudPassenger is attempting to deploy a commit to the LobeHub Team on Vercel.

A member of the Team first needs to authorize it.

[lobehubbot]

👍 @CloudPassenger

Thank you for raising your pull request and contributing to our Community
Please make sure you have followed our contributing guidelines. We will review it as soon as possible.
If you encounter any problems, please feel free to connect with us.
非常感谢您提出拉取请求并为我们的社区做出贡献，请确保您已经遵循了我们的贡献指南，我们会尽快审查它。
如果您遇到任何问题，请随时与我们联系。

[arvinxx]

It's amazing! Actually we won't plan to support OAuth before 😅 ( like #331 、#496).

But as you have open a pull request to implement it, I think we can discuss about it.

Let me take a look of your code at first. 👏

[arvinxx]

It seems not a very heavy task, and the code is clean 👍

But I request to think of these issues:

1. By default, we won't want to show the SSO OAuth in the UI. Because our first customers are the C , not the B. So please make a set of ENVs to make this feature optional enabled, and it should be disabled by default.
2. Please wirite done some doucments about this feature, it should include:
   • Add an guide of how to enable SSO OAuth in the docs/Deployment folder to help self hosting users know how to use the SSO OAuth feature in their companies with Docker or Vercel/zeabur/SealOS.
   • Update the usage of these environment variables to the Environment-Variable and Chinese Version 环境变量.
   • Add a develop guide of this feature to introduce how to maintain this feature or to improve it (for example, how it work, how to test and so on ). We need a guide for the community to make this feature more maintainable.
3. as for the implement, I think the auth of openai/... is not clean as I expect.Maybe there can be a more biz auth function to just wrapper the router function with noting need to change with type or params. Let's take a challange of it.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
lobe-chat	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 5, 2024 0:37am

[codecov]

Codecov Report

Attention: 5 lines in your changes are missing coverage. Please review.

Comparison is base (4b6663b) 86.37% compared to head (604cbd7) 86.35%.
Report is 5 commits behind head on main.

Files	Patch %	Lines
src/const/fetch.ts	40.00%	3 Missing ⚠️
src/app/api/auth.ts	71.42%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1143      +/-   ##
==========================================
- Coverage   86.37%   86.35%   -0.02%     
==========================================
  Files         214      214              
  Lines       10540    10557      +17     
  Branches     1140     1140              
==========================================
+ Hits         9104     9117      +13     
- Misses       1436     1440       +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[CloudPassenger]

It seems not a very heavy task, and the code is clean 👍

But I request to think of these issues:

1. By default, we won't want to show the SSO OAuth in the UI. Because our first customers are the C , not the B. So please make a set of ENVs to make this feature optional enabled, and it should be disabled by default.

2. Please wirite done some doucments about this feature, it should include:

   • Add an guide of how to enable SSO OAuth in the docs/Deployment folder to help self hosting users know how to use the SSO OAuth feature in their companies with Docker or Vercel/zeabur/SealOS.
   • Update the usage of these environment variables to the Environment-Variable and Chinese Version 环境变量.
   • Add a develop guide of this feature to introduce how to maintain this feature or to improve it (for example, how it work, how to test and so on ). We need a guide for the community to make this feature more maintainable.

3. as for the implement, I think the auth of openai/... is not clean as I expect.Maybe there can be a more biz auth function to just wrapper the router function with noting need to change with type or params. Let's take a challange of it.

Thank you for your kind review. I will follow the instructions and make changes as soon as possible.

[arvinxx]

@CloudPassenger fell free to ask anything about implement~ 😁

[CloudPassenger]

Hi, based on your reviews I made some changes and refractor the code

1. UI: Added a variable to control the display of OAuth-related UI components.
2. Middleware: Replaced the auth wrapper at the routing level with a custom middleware that adds a custom request header for authentication, aligning with the Access Code authentication pattern. Moved relevant authentication logic into getOpenAIAuthFromRequest and checkAuth functions for better encapsulation.
3. Code Cleanup: Simplified the next-auth implementation by removing unnecessary types and relocating code to the oauth directory. The reason I chose the beta is that Auth.js was only fully Edge compatible in v5.

Issue:
In the process of refactoring the code, I found a problem: Client-side rendered error dialogs InvalidAccess.tsx cannot access server-side environment variables 🙁
And there are also no relevant parameters to pass in the render function. So I'm stuck with a variable exposed to the client: NEXT_PUBLIC_ENABLE_OAUTH to control whether it is displayed or not. There may be a better way to do this, but with fewer changes to the code, this is the only way to go for now.

Upon further code review, I will supplement this PR with the requested documentation, including deployment guides, environment variable usage, and a development guide for maintaining and improving the SSO OAuth feature.

[arvinxx]

A more clean implement! 👏 And I think we can make it better.

As you said, there is some problem with client side/ server side envs.

And we have met simmilar problem as before, and here is my thought:

1. defined a totally server ENV in the src/config/server.ts like ENABLE_OAUTH_SSO ,
2. update the code at api/config/route.ts , https://github.com/lobehub/lobe-chat/blob/main/src/app/api/config/route.ts#L9 , this api will send the ENVs from server to client. And we have a request method to get data from server when LobeChat init.
3. make a selector in here:

const  enabledOAuthSSO =  (s: GlobalStore): boolean => s.serverConfig.enabledOAuthSSO || false;

export const globalSelectors = {
  enabledOAuthSSO
}

4. and use the selectors to make condition:

const isEnabledOAuth = useGlobalStore(globalSelectors.enabledOAuthSSO)

Important

Don't use NEXT_PUBLIC_XXX env as the feature flag, because it's not working with Docker Deployment. here are some issues about this:

• [Bug] Vercel部署，NEXT_PUBLIC_CUSTOM_MODELS 参数不起作用 #685
• [Bug] Docker安装使用 NEXT_PUBLIC_CUSTOM_MODELS 变量自定义模型问题 #509

you can refer to #773 for more example.

[arvinxx]

what's this TODO means ?

[CloudPassenger]

I would have thought that some code could have been added to set user permissions (e.g. only allow certain email suffixes to log in). But after thinking about it, the best solution would be to control organisation permissions on the provider of OAuth 2.0 like Auth0.

[arvinxx]

Now It's ok for this feature, I think it's good enougth to merge it 😄. Please rebase the master to resolve the conflict and then add some documents about it~

[CloudPassenger]

Hi,

Sorry to my late reply. I was so busy last week that I didn't follow up on this Pull Request. I saw tons of updated in these few days.

I've updated the code according to your instructions, adapted the new API structure, and written a short note about environment variables.

I hope you can review it again. And wish you a happy Spring Festival!

[arvinxx]

@CloudPassenger Good update! And happy Spring Festival!

I think your code is as clean as possible. It's time to step into next part: documents.

Here are three more things to think:

1. The Env document is OK. There is a small issue need to be discussed: do you think is a good idea to use ENABLE_OAUTH_SSO as the SSO feature flag? or just use !!AUTH0_CLIENT_ID?
2. I think there should be a guide for the user to enable Auth0 OAuth SSO. (Actually I don't know about this)
3. There also should be a guide for the developer to know how to debug this feature in dev mode.

[CloudPassenger]

Hi,

Thank you for your feedback. I wrote the instructions for deployment and I am working in progress for the documents for developers.

I've given your question some serious thought, and I think for now it's better to use the ENABLE_OAUTH_SSO environment variable alone to enable/disable the feature.

While only Auth0 is currently adapted (personally, because it's being used within my organisation), Auth.js does support for use with multiple providers at the same time.

Other developers can easily adapt the single sign-on authentication methods they need, such as enterprise management platforms like Okta, which is not supported by Auth0, based on the capabilities of Auth.js. So they can use different providers for different group of tenants (staff, temporary users, etc.)

Regardless of which provider is used, I think it would be more intuitive to use a single environment variable to enable/disable functionality.

[CloudPassenger]

The integration guide for developers is updated 🚀

[arvinxx]

Nice work! 👍 I'm glad to merge this PR.

[lobehubbot]

❤️ Great PR @CloudPassenger ❤️

The growth of project is inseparable from user feedback and contribution, thanks for your contribution! If you are interesting with the lobehub developer community, please join our discord and then dm @arvinxx or @canisminor1990. They will invite you to our private developer channel. We are talking about the lobe-chat development or sharing ai newsletter around the world.
项目的成长离不开用户反馈和贡献，感谢您的贡献! 如果您对 LobeHub 开发者社区感兴趣，请加入我们的 discord，然后私信 @arvinxx 或 @canisminor1990。他们会邀请您加入我们的私密开发者频道。我们将会讨论关于 Lobe Chat 的开发，分享和讨论全球范围内的 AI 消息。

[lobehubbot]

🎉 This PR is included in version 0.125.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀